Solved
Adding Flatpickr (Timepicker) to a Question
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!
Best answer by MohammedAli_Rajapkar
- 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.
View original
- Source
- !
- create time question in html
- !
Import the QSF file and check the data as well.
+20- 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.
- Source
- !
- create time question in html
- !
Import the QSF file and check the data as well.
+27@nicole_celestine,
Your code should look like this:
```
Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, noCalendar: true, dateFormat: "H:i"});
});
```
@> @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"?
> - 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"?
> > - 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.
!
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!
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*/
});
+1https://community.qualtrics.com/XMcommunity/discussion/comment/48993#Comment_48993Hi there,
Have you solve this problem?
+27https://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.
+27https://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.
TomG wrote:
@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.
Leave a Reply
Rich Text Editor, editor1
Editor toolbars
Press ALT 0 for help
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.