Select several dates from the calendar | XM Community
Skip to main content
Hey guys,



I would like my respondents to be able to pick several dates from the calendar.

(I am asking: "When did you do xx?" And they have done xx several times. )

I know that there is the calendar function from the Qualtrics library ("select a date"), but this allows me only to select one date at a time and not several.

Is there a way to change that?

My respondents would probably select up to ten dates.



Help would be very much appreciated!!! Thanks in advance 🙂
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!

Leave a Reply


Terms & Conditions