HELP with time picker PLEASE

In the custom javascript section of a text entry question, add something like this :

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

jQuery("#"+this.questionId+" .InputText").attr("type", "time").css("max-width", "120px");

});

Hi @kat Jeff 
step 1:  choose a text entry question 
step 2: go to java script: 

step 3 fill this script in and press save:

Qualtrics.SurveyEngine.addOnload(function() {

   

    var inputField = document.querySelector('input[type="text"]');

  

    inputField.setAttribute('type', 'time');

    inputField.setAttribute('step', '60'); 

    

    inputField.setAttribute('min', '00:00');

    inputField.setAttribute('max', '23:59');

});

Qualtrics.SurveyEngine.addOnReady(function()

{

    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()

{

    /*Place your JavaScript here to run when the page is unloaded*/

});

step 4 check it with preview
 

Hope this will help you and is what you look for

@kat Jeff Hello!  I tried to follow some of the other posts also.  I got it to technically work, but it may not be as eloquent as others have tried to create.  Please feel free to reach out, I honestly fumbled through it, but it should get you there.

In the “Look and Feel”, in General, in Header copy and paste the following:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Then in the survey, use a text-entry question, you can edit the question to what you want it to ask.  

In JavaScript:

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, noCalendar: true, dateFormat: "H:i"});
});

Then, when you preview or take the survey, when someone clicks in the box, the time selector drop- downs appear for them to navigate through.

So full disclosure...this will technically get you there.  As others have had input on, there are ways to have min/max values, box cleanup, etc. to make it more visually pleasing, and by default maybe more correct?

When I look at Data & Analysis after just picking random numbers, the time does display:

Good luck!!

Thank so much you are all SO KIND to help!

Looks like I am almost there  - I followed RickBs route.

Now I have the problem that this new format is applied to OTHER text questions where I did not write it into the java script. When I go preview question - it's fine, but when I look at preview of entire questionnaire its all over the place. 

Any top tip for that??????

AAAARRRGH

Hi @kat Jeff 
step 1:  choose a text entry question 
step 2: go to java script: 

step 3 fill this script in and press save:

Qualtrics.SurveyEngine.addOnload(function() {         var inputField = document.querySelector('input[type="text"]');

       inputField.setAttribute('type', 'time');     inputField.setAttribute('step', '60'); 

         inputField.setAttribute('min', '00:00');     inputField.setAttribute('max', '23:59'); });

Qualtrics.SurveyEngine.addOnReady(function() {     /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function() {     /*Place your JavaScript here to run when the page is unloaded*/

});

 

 

step 4 check it with preview
 

 

Hope this will help you and is what you look for

Hi @kat Jeff 
 

When I add multiple questions I don't get your problem.
 

You can click on the question where you see the problem and then on JavaScript. Is this empty?

 

When you click on the question to which this should be applied, is the JavaScript there?

 

Can you send a screenshot what the problem is? 

@RickB Your selector will always apply to the first text input of the questions grouped on a same page, whether it’s placed in the 1st or 3rd question’s custom javascript. But it shouldn’t apply to all questions unless it’s been repeated.

@vgayraud I see what you mean.

an easy solution is to place the question on a separate page

Thank you guys so much = put it on separate pages and that did the trick!

AMAZING. THANK YOU!