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.

Second vote for Flatpickr!

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

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

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} });
});

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.

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! 

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.

It worked out! Thank you!