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!

Sign In to Comment