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.
- 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.
@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.
I’ve followed
Can anyone help me please?
+27
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.
Sign up
Already have an account? Login
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login to the Community
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join.
No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Login with Qualtrics
Welcome! To join the Qualtrics Experience Community, log in with your existing Qualtrics credentials below.
Confirm your username, share a bit about yourself, Once your account has been approved by our admins then you're ready to explore and connect .
Free trial account? No problem. Log in with your trial credentials to join. No free trial account? No problem! Register here
Already a member? Hi and welcome back! We're glad you're here 🙂
You will see the Qualtrics login page briefly before being taken to the Experience Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.