Adding Flatpickr (Timepicker) to a Question | XM Community
Skip to main content
Hi there, My respondents have been complaining about the hassle of navigating three separate dropdown boxes to select times in a survey that asks a lot about their activities throughout different times of the day. I am therefore looking to add the Time Picker available here as a survey question. I know *nothing* about Javascript and so I was hoping someone could tell me how to go about doing this. So far I have gauged the following: I can paste things under the OnLoad, OnRead, or OnUnload JS sections of a question and so I've pasted the following 'input element' under the OnLoad section without getting any errors: Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+" .InputText").flatpickr(optional_config); }); I've then tried pasting the following under all three sections and keep getting errors about the brackets not being closed (even though they're closed), as well as there being unexpected identifiers. { enableTime; true, noCalendar; true, dateFormat; "H:i", } Any help, or a simple walk-through would be much appreciated!
- Create a text-entry question - Change the question text anything you would like - Open the rich content editor of the question text - Click on source icon - Create an input element with type time and provide the min and max time value - through JavaScript hide the Qualtrics text entry box and store the time value in Qualtrics text entry question Attached is the QSF. and below is the image of above steps - Rich content editor - ! - Source - ! - create time question in html - ! Import the QSF file and check the data as well.
@nicole_celestine, Your code should look like this: ``` Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, noCalendar: true, dateFormat: "H:i"}); }); ```
Brilliant!! Thank you both. This has solved my problem and saved me a tonne of time! :)
@> @Mohammedali_Rajapakar_Ugam said: > - Create a text-entry question > - Change the question text anything you would like > - Open the rich content editor of the question text > - Click on source icon > - Create an input element with type time and provide the min and max time value > - through JavaScript hide the Qualtrics text entry box and store the time value in Qualtrics text entry question > > Attached is the QSF. > > and below is the image of above steps > - Rich content editor > - ! > - Source > - ! > - create time question in html > - ! > > Import the QSF file and check the data as well. Thank you, this is super helpful! Is there a way to make the time format look like this "00:00" instead of this "00:00:00"?
Is it possible to change this into a 24-hour time-picker? i.e. that format will be 00:00 without the AM/PM option? Thanks ! > @gbufton said: > @> @Mohammedali_Rajapakar_Ugam said: > > - Create a text-entry question > > - Change the question text anything you would like > > - Open the rich content editor of the question text > > - Click on source icon > > - Create an input element with type time and provide the min and max time value > > - through JavaScript hide the Qualtrics text entry box and store the time value in Qualtrics text entry question > > > > Attached is the QSF. > > > > and below is the image of above steps > > - Rich content editor > > - ! > > - Source > > - ! > > - create time question in html > > - ! > > > > Import the QSF file and check the data as well. > > Thank you, this is super helpful! Is there a way to make the time format look like this "00:00" instead of this "00:00:00"?
So 1. Download Timepicker.qsf 2. Import into Qualtrics. 3. Go to your survey and import questions from another survey. Select the question from the "TimePicker" survey. Super! Thank you!
When I add the TimePicker qsf in and preview it, I can't see my inputted time in the preview window and when I submit my answers, the time data doesn't appear either. Is there a way to troubleshoot this? This is what I'm seeing: ! ! The first image is what is shown in the preview and the second is what I've input as my answer.

https://community.qualtrics.com/XMcommunity/discussion/comment/5418#Comment_5418Hi everyone, when I import the QSF, the question appears properly when people do the survey. However, when I download the data in a CSV or Excel, there is not data recorded. Like the column for the question doesn't exist on the distribution tab or when I pull the data. Please help!
TimePicker.png

https://community.qualtrics.com/XMcommunity/discussion/comment/47483#Comment_47483Hi sorry I answered my own question. The issue was that I had the Flatpickr as a "Text/Graphic" question but it needed to be a "Text Entry" question.

I downloaded and followed all of the instructions and made two time-based questions. The only problem I am having is that I have two time questions and although I am testing it with inputting two different times, it will only report the time in the first block. Even if I reimport the question or make a new text entry question! Help!!!
Source code:

During the past month, what time have you usually gotten up in the morning?


 


Select Time: 

JS code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/

});

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

var Qbd = "input[id='QR~"+this.questionId+"']";

jQuery("#" + this.questionId + " .InputText").hide();

jQuery("#appt-time").on(" change", function() {

jQuery(Qbd).val(jQuery("#appt-time").val()) ;

});

});

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

});

https://community.qualtrics.com/XMcommunity/discussion/comment/48993#Comment_48993Hi there,
Have you solve this problem?

https://community.qualtrics.com/XMcommunity/discussion/comment/54769#Comment_54769The id of the time input field needs to be unique.

yqu36
Yes, I solved it - I was able to get the time picker to work but I had to move the second time question to a different block entirely. It could not be in the same block/page of questions or the formula was confused. That being said, I am not Java coder.

https://community.qualtrics.com/XMcommunity/discussion/comment/54789#Comment_54789If the ids of the time input fields are unique they can be on the same page.

@nicole_celestine,

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


```

Hi may I know where is the qsf file attached? Many thanks.

​@TomG, like ​@Zhuhan, I was after the QSF file that people say is attached but I can’t find.

I’ve followed ​@MohammedAli_Rajapkar’s instructions above, but don’t know how to use javascript to hide the text entry box and can’t find the QSF file that is attached.

Can anyone help me please?

​@KateD,

A simpler solution, add this JS to a text entry - single line question:

Qualtrics.SurveyEngine.addOnload(function() {
  this.getQuestionContainer().querySelector("input[type=text]").setAttribute("type","time");
});

You can set additional attributes like min, max, and step if needed.  Time will be stored in military HH:MM format.

 

That works, thanks ​@TomG!

Terms & ConditionsAccessibility statement