Select a date - Java Script | XM Community
Solved

Select a date - Java Script

A
Rank
Userlevel 2
Badge +3

Dear community

I have an issue with adapting the ‘select a date’ question from the Qualtrics library to the format I want to use. I got it from Qualtrics library > Demographics > Calendar & Date Questions > Select a date (matrix). 

First I want to change the order: month - day - year into day - month - year, the dropdown lists of course need to follow this new order. Accordingly I want to translate everything into Dutch: ‘day’ → ‘dag’, ‘month’ → ‘maand’ and ‘year’ → ‘jaar’. Also the month dropdown list needs to be translated to Dutch. Last, I want to change the year range in the dropdown list to 1960-2011. 

I tried to adapt this through Java script but I got very weird dropdown lists every time. Can someone help me out with this issue? Or does someone knows an easier way to let respondents enter their date of birth in a fixed format? 

Thanks in advance!

icon

Best answer by TomG 18 September 2023, 15:18

View original

11 replies

TomG
Rank
Userlevel 7
Badge +27

flatpickr is a much better date picker and integrates well with Qualtrics. There are a bunch of community posts about it.  It supports any date format and many languages.

A second alternative if to use cleave.js to format the date as it is typed.

A final alternative (my least preferred) is to use a side-by-side with dropdowns in three columns.

EricT
Rank
Userlevel 3
Badge +3

Second vote for Flatpickr!

A
Rank
Userlevel 2
Badge +3

@TomG @EricT 

Can you also maybe help me out with another question regarding to this topic? I would like to have my calendar displayed in a way that weeks are starting on Monday instead of on Sunday. How can I adapt this in the most easy way? I tried already different options but so far none of them seems to work? A screenshot of the Javascript would be very helpful!

Thanks in advance! 

TomG
Rank
Userlevel 7
Badge +27

@AnnaW - One of the Flatpickr locale options is firstDayofWeek. See this.

A
Rank
Userlevel 2
Badge +3

I believe that’s my problem. I don’t know how to use the ‘locales’ or where (onload, onready or unload) and how to paste them correctly in Javascript. I always get an error of an invalid Javascript.

TomG
Rank
Userlevel 7
Badge +27

I believe that’s my problem. I don’t know how to use the ‘locales’ or where (onload, onready or unload) and how to paste them correctly in Javascript. I always get an error of an invalid Javascript.

Survey header:

<link href="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/combine/npm/flatpickr@4,npm/flatpickr@4/dist/l10n/nl.min.js"></script>

Question JS:

Qualtrics.SurveyEngine.addOnload(function() {
	var input = jQuery(this.questionContainer).find(".InputText");
	flatpickr.localize(flatpickr.l10ns.nl);
	input.flatpickr({ locale:{firstDayOfWeek:1} });
});

 

A
Rank
Userlevel 2
Badge +3

Hi @TomG 

 

I came back to my survey after working on other projects and now the flatpickr isn’t working anymore. Has there been an update or something that might have caused this? 

Thanks in advance! 

TomG
Rank
Userlevel 7
Badge +27

Hi @TomG 

 

I came back to my survey after working on other projects and now the flatpickr isn’t working anymore. Has there been an update or something that might have caused this? 

Thanks in advance! 

It still works for me. Did you switch the survey to simple layout? That would explain it.

A
Rank
Userlevel 2
Badge +3

I have selected “classic lay-out”

This is pasted in the javascript of the header (contains also a code for a date format for another question)

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

<script src="https://cdn.jsdelivr.net/combine/npm/flatpickr@4,npm/flatpickr@4/dist/l10n/nl.min.js"></script>
<link href="https://npmcdn.com/flatpickr/dist/themes/material_red.css" rel="stylesheet" type="text/css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/cleave.js@1/dist/cleave.min.js"></script>

 

And this is what the javascript of the questions looks like

Thanks! 

TomG
Rank
Userlevel 7
Badge +27

So, it looks like you’ve set it up for flatpickr with classic layout and cleave with simple layout.

If you are using flatpickr in classic layout your survey header in its entirety should be:

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<link href="https://npmcdn.com/flatpickr/dist/themes/material_red.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/combine/npm/flatpickr@4,npm/flatpickr@4/dist/l10n/nl.min.js"></script>

And your JS should be only the addOnload function.

A
Rank
Userlevel 2
Badge +3

It worked out! Thank you! 

Leave a Reply


Terms & Conditions