Select several dates from the calendar | XM Community
Solved

Select several dates from the calendar

  • 28 June 2019
  • 9 replies
  • 489 views

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 🙂
icon

Best answer by TomG 28 June 2019, 14:11

View original

9 replies

Userlevel 7
Badge +27
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?
Userlevel 7
Badge +27
> @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.

Badge +2

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. 🤦‍♀️

Badge

@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>

 

Leave a Reply