How to add timepicker to a field in a matrix type question | XM Community
Solved

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

  • 20 September 2018
  • 9 replies
  • 189 views
D
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!

!
icon

Best answer by TomG 20 September 2018, 16:37

View original

9 replies

MohammedAli_Rajapkar
Rank
Userlevel 7
Badge +20
Please check this thread. It will help:

https://www.qualtrics.com/community/discussion/1691/adding-flatpickr-timepicker-to-a-question
Regards, Mohammed Ali
D
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?
TomG
Rank
Userlevel 7
Badge +27
@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"});
});
```
christopeter
Rank
Userlevel 3
Badge +1
> @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.
D
@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.
NiC
Rank
Userlevel 7
Badge +27
Hi @DarioKrpan11
1. In Look and Feel > Back to Old Editor > Advanced > Header Add the following code: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
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.
!
XM Engineer | Zill Consulting
D
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.
TomG
Rank
Userlevel 7
Badge +27
> @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>
```
D
@TomG

Nice! Thanks a lot

Leave a Reply


Terms & Conditions