Please check this thread. It will help:
https://www.qualtrics.com/community/discussion/1691/adding-flatpickr-timepicker-to-a-question
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?
@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"});
});
```
>
@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.
@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.
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.
!
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.
>
@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>
```
