Hello,
I am attempting to use a calendar date box, I have inserted using import from library -> demographics ->calendar and date questions -> enter a date.
Help 
Best answer by Tom_1842
View original
+27
Hi,
You could try using flatpickr instead of the Qualtrics library calendar. To try it out, add the below to the Header in the survey's Look & Feel:
Then within the survey, create a single line text entry question. Add Javascript to this survey question and add the below to the addOnReady section:
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "d-m-Y",
});
Which should look like:
Hope this helps!
+27
Hi, it looks like you updated your post. The JS code you posted doesn't look like it is specifying a date format. Try adding the dateFormat piece:
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "d-m-Y",
});
When I use the above, this is what I get in preview.
Any suggestions?
+27
Hmm, it doesn't look like your code was added as JS. Try importing the attached QSF file into a blank survey project.
Flatpickr_Datepicker.qsf
Thank you Tom, that was really helpful. I have that uploaded and it is working! Only question now is how to change this date format into D-M-Y.
You mentioned above to add this :
jQuery("#"+this.questionId+" .InputText").flatpickr({
dateFormat: "d-m-Y",
});
I am unsure where to add this. When I select the date question on HTML view (I think this is how I add javascript?) I see the below. Where do I add the date specification to this?
What I see when I select HTML view:
Enter a date:">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css">
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js">
+27
Hi, Q4 in the attached QSF is collecting the date in the d-m-Y format. If you click on the symbol within the Survey Builder, you will see the JS that is in place.
Q3 is using the calendar from the Qualtrics library, and the HTML View for that question is what you posted above. I included that question more as a comparison reference, but feel free to delete it and move forward with Q4 for your project.
+27
Try this QSF instead. I removed the Qualtrics calendar and made it so one of the flatpickr calendar questions is always displaying. Adjust as needed by clicking the symbol on the survey questions.
Flatpickr_DatepickerV2.qsf
Thank you! That is fantastic. I have used it and it is working perfectly.
My question now, is I have tried to import that question into my survey, and the question no longer loads with the calendar. I have imported the question directly from the Flatpickr_DatepickerV2.qsf
Uploaded Feb 11, 202210.49 KB file into my survey. Once imported, the JS is still intact in survey builder. But in preview, the calendar does not appear. 
+27
Glad to hear it! If you are importing the question from the Flatpickr_DatepickerV2.qsf survey into a different survey, you will likely need to also bring over the code in the Header section of the Look & Feel. Try grabbing the code in the Header section from the Flatpickr_DatepickerV2.qsf survey and adding it to your survey. Below also for reference:
Hello Tom,
Thanks for all your help so far. One other thing has crept up, the calendars are working now - but not successfully on mobile phones. It shows a box to click on on mobile phones in the preview, but not when the survey is sent out. Is there any solution for this?
To note: the calendar is still working, even when the box does not appear. If I click on the empty space below where the box should be, a calendar appears. But obviously this is difficult for those taking the survey that don't see a way forward.
Any help would be massively appreciated 
+27
Hmm, I am not sure I am able to recreate on my end, the calendar displays alright for me on mobile. I'd recommend going with the "inline" version of the flatpickr question so that the calendar is always displaying to the respondent regardless if the text entry box is clicked. Q5 in the attached for reference with the date format adjusted.
Flatpickr_DatepickerV3_2.qsf
+27
+5
Hey Tom,
Just dropping you a line to thank you for the examples in the zip file. They are very useful indeed! I studied them and made some modifications to suit the format needed in my surveys. You are right in saying that Flatpickr makes a much better date/time picker. Really appreciate your efforts & recommendations!
I’d like to add that if I used text entry format for the date questions, I cannot see the box like other normal text entry questions in Qualtrics. However, clicking on the blank space below the question text will bring the calendar up nevertheless. In the end, I resorted to using side-by-side with open-end entry box, it then worked perfectly (showing a box).
Best regards,
Philip
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
