Flatpicker multiple calendar dates | XM Community
Skip to main content

Hi, 

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. 

I should mention that I have no coding experience. Any help would be appreciated!

I’m not an expert but this is what works for me:

 

Under "look and feel" > "General" > "Header", paste the following html:

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

 

Paste this under

Qualtrics.SurveyEngine.addOnload(function(){
    /*Place your JavaScript here to run when the page loads*/
    

jQuery("#"+this.questionId+' input').flatpickr({dateFormat:"m/d/Y",allowInput: true});

 

https://flatpickr.js.org/examples/ has many ways to customize the calendar (dateFormat and allowInput are specified above).

 

I don’t add any html in the question itself. If that doesn’t work, I recommend posting your code and others will be more able to help.

 

Thank you.  I still can’t get it working.  I’ll probably just leave it as is, and keep the dates/times as a fill in question. I’ve spent too much time and have to keep things moving forward. 

Leave a Reply


Terms & Conditions