Use flatpickr instead. It allows for selection of multiple dates. Besides, it is far superior to the date picker in the Qualtrics library.

---

Great, thank you for your answer!
I am quite new to this, therefore, the follow-up question: How do I implement flatpickr in Qualtrics?

---

> @LeS1 said:
> Great, thank you for your answer!
> I am quite new to this, therefore, the follow-up question: How do I implement flatpickr in Qualtrics?

Add flatpickr to your survey header:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
```
Use JS to attach it to a text input field:
```
jQuery("#"+this.questionId+" .InputText").flatpickr({ /*flatpickr options go here */ });
```

---

Great that works, thank you!!!

---

@LeS1 Can you please walk me through how you did this? I'm also trying to have participants select multiple dates on the calendar.

---

> @TomG said:
> > @LeS1 said:
> > Great, thank you for your answer!
> > I am quite new to this, therefore, the follow-up question: How do I implement flatpickr in Qualtrics?
>
> Add flatpickr to your survey header:
> ```
> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
> ```
> Use JS to attach it to a text input field:
> ```
> jQuery("#"+this.questionId+" .InputText").flatpickr({ /*flatpickr options go here */ });
> ```

Is there a way to get the date to be displayed in the csv or spss file as three variables: Month, Day, Year, each as a numeric value?

---

https://www.qualtrics.com/community/discussion/comment/15357#Comment_15357I'm relatively new to Qualtrics (and js in general), and using flatpickr to display dates from which a respondent can choose. I don't really like the alignment, and have tried some options, but something always gets in the way.
With this, it looked great:
jQuery("#"+this.questionId+" .InputText").flatpickr(
{
   enableTime: true,
   mode: "multiple",
   position: “above”
   dateFormat: "Y-m-d H:i",
});

But when I try to make it inline, it goes right back to being below the textbox.

---

Forgive my ignorance (because I know next to nothing about javascript), but I can't get this to work, and I'm pretty sure it's because I'm doing it wrong (because I know next to nothing about javascript ha!). SO...I've added this to the survey header:


But when I add to a text input field the jQuery bit that TomG posted above, it doesn't do anything. I'm pretty sure i'm missing some code that it's assumed I should know...but...since *I know next to nothing about javascript*, I don't know what code is missing in order to "use JS to attach it to a text input field".
Sorry! I just don't know what I'm doing and could use a little bit of hand holding. ‍♀️

---

@TomG is a Legend! 

Using this code in my text entry question - Date selection=multiple, date format - d-m-y, min+max date range in the calendar and using separator ‘ ; ’

Qualtrics.SurveyEngine.addOnload(function() {
    jQuery("#" + this.questionId + " .InputText").flatpickr({
        mode: "multiple",
        dateFormat: "d-m-Y",
        minDate: "today",
        maxDate: "31-12-2023",
        conjunction: " ; "
    });
});

Also, don’t forget to add the following code in your survey → look and feel → general → header:

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

 

---

Hi, this advice on Flatpicker has been fantastic! I have absolutely no coding experience. 

I’m trying to input a flatpicker calendar so my participants can pick multiple dates to interview.  Nothing fancy.

However, I still can’t get it to work.  I have the coding embedded in the general header section, and have loaded the code in both a text/graphic and text box separately.  I have tried putting the coding in using the java link on the left hand side as well as through the top tab (HTML view v normal).  I’m at my wits end trying to figure out what I’m doing wrong.  Any help would be appreciated!

 

 

---

> @LeS1 said:
> Great, thank you for your answer!
> I am quite new to this, therefore, the follow-up question: How do I implement flatpickr in Qualtrics?

Add flatpickr to your survey header:
```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
```
Use JS to attach it to a text input field:
```
jQuery("#"+this.questionId+" .InputText").flatpickr({ /*flatpickr options go here */ });
```

 @TomG THANK YOU THANK YOU THANK YOU! I know you posted this five years ago, but I was FINALLY able to get flatpickr to work using this guidance. You are a lifesaver!

---