Adding Flatpickr (Timepicker) to a Question

nicole_celestinenicole_celestine AustraliaCommunity Member - Trial User Qubie ✭

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!

Tagged:

Best Answers

  • Mohammedali_Rajapakar_UgamMohammedali_Rajapakar_Ugam Mumbai - India Wizard ✭✭✭✭✭
    Accepted Answer
    • 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.

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    @nicole_celestine,

    Your code should look like this:

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

Answers

  • nicole_celestinenicole_celestine AustraliaCommunity Member - Trial User Qubie ✭

    Brilliant!! Thank you both. This has solved my problem and saved me a tonne of time! :)

  • gbuftongbufton Community Member Qubie ✭

    @> @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"?

  • sznitman_sharonsznitman_sharon IsraelCommunity Member Qubie ✭

    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"?

  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    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!

  • SophieMSophieM Chicago, ILCommunity Member Qubie ✭
    edited March 24

    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.

Sign In to Comment