Adding Flatpickr (Timepicker) to a Question | XM Community
Solved

Adding Flatpickr (Timepicker) to a Question

  • 23 August 2018
  • 14 replies
  • 1510 views
N
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!
icon

Best answer by MohammedAli_Rajapkar 23 August 2018, 12:02

View original

14 replies

TomG
Rank
Userlevel 7
Badge +27

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.

K
Badge

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.

TomG
Rank
Userlevel 7
Badge +27

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

Y
Badge +1

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

K
Badge

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*/

});

M

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.

M

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

S
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.
J
Userlevel 1
Badge +3
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!
S
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"?
G
@> @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"?
N
Brilliant!! Thank you both. This has solved my problem and saved me a tonne of time! 🙂
TomG
Rank
Userlevel 7
Badge +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_Rajapkar
Rank
Userlevel 7
Badge +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.
Regards, Mohammed Ali

Leave a Reply


Terms & Conditions