How to add timepicker to a field in a matrix type question

DarioKrpan11DarioKrpan11 LondonCommunity Member Qubie ✭

How to add timepicker to a field in a matrix type question

Hi everyone,

I am designing a survey where I will ask participants to input start and end time of an activity in a matrix type question and for that I am planning to use the time picker function in java (see this link). However, I cannot figure out how to apply this java code to specific fields in the matrix type question (see the attached image below). Does anyone maybe know how this would be possible?

Thank you very much for your help and suggestions!

Best Answer

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

    @DarioKrpan11,

    For the 3rd and 4th columns in the Matrix, like this:

    Qualtrics.SurveyEngine.addOnload(function() {
        jQuery("#"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
        jQuery("#"+this.questionId+" td.c6 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    });
    

Answers

  • Mohammedali_Rajapakar_UgamMohammedali_Rajapakar_Ugam Mumbai - IndiaUnconfirmed, Qualtrics Partner Wizard ✭✭✭✭✭
  • DarioKrpan11DarioKrpan11 LondonCommunity Member Qubie ✭

    Thank you very much for your answer. That thread does explain how to implement time picker. However, it doesn't say anything about how it would be possible to apply it to a field in a matrix type question. Are there maybe any other insights about how to do this?

  • christopeterchristopeter BangaloreCommunity Member Guru ✭✭

    @DarioKrpan11 said:
    Thank you very much for your answer. That thread does explain how to implement time picker. However, it doesn't say anything about how it would be possible to apply it to a field in a matrix type question. Are there maybe any other insights about how to do this?

    Oh, I think @tomg solution is best.

  • DarioKrpan11DarioKrpan11 LondonCommunity Member Qubie ✭

    @TomG

    great, thank you very much. Now the only issue remaining is that I cannot get the code to work. From what I understand, I do not need to separately install flatpickr because this is done via jQuery, and the only thing that I had to do was to add question id, which would make the code look like this:

    Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("QID214"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    jQuery("QID214"+this.questionId+" td.c6 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    });

    Despite this, however, the code is not working. Do you maybe have an idea whether something else needs to be changed in the code as well or some other issue may be the case? Thank you very much once again for everything.

  • NiCNiC MumbaiCommunity Member, Product Ideas Superuser ✭✭✭✭

    Hi @DarioKrpan11
    1. In Look and Feel > Back to Old Editor > Advanced > Header Add the following code:

    2. jQuery("QID214"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    Remove the QID214 and add "#" as @TomG had orignally said.
    3. the code affected my 2nd column as td.c5 refers to table data element c5 which is 2nd column for me. and you can find out which one it corresponds to yours by using Inspect Element of your browser while in survey preview.

  • DarioKrpan11DarioKrpan11 LondonCommunity Member Qubie ✭

    Thanks @NiC_Ugam

    So, you mean just basically posting the following code into Look and Feel > Back to Old Editor > Advanced > Header, but without adding any code into the JavaScript of the question itself?: jQuery("#"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});

    I tried that but it does not work.

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭
    edited September 2018

    @DarioKrpan11 said:
    @TomG

    great, thank you very much. Now the only issue remaining is that I cannot get the code to work. From what I understand, I do not need to separately install flatpickr because this is done via jQuery, and the only thing that I had to do was to add question id, which would make the code look like this:

    Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("QID214"+this.questionId+" td.c5 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    jQuery("QID214"+this.questionId+" td.c6 input").flatpickr({enableTime: true, noCalendar: true, dateFormat: "h:i K"});
    });

    Despite this, however, the code is not working. Do you maybe have an idea whether something else needs to be changed in the code as well or some other issue may be the case? Thank you very much once again for everything.

    Flatpickr isn't built-in to Qualtrics, and my guess is you haven't added the CSS and JavaScript to your header:

    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    
  • DarioKrpan11DarioKrpan11 LondonCommunity Member Qubie ✭

    @TomG

    Nice! Thanks a lot

Sign In to Comment