Datetime Pickr | XM Community
Skip to main content
Hi!



I am in the middle of developing a form and I would like to have respondents choose a single date and time on a picker calendar in a single question and prevent them from choosing a date in the past or a date less than seven days in the future. I know Flatpickr has a code for the one I would like to have where you choose date first on a calendar and then the time option appears underneath but I am not well versed in integrating this into my survey.



Any guidance or step by steps would be greatly appreciated.



Thanks!
Hi @cma - you can add a datetime picker to a text entry question using Flatpickr.



I would recommend familiarizing yourself with the Flatpickr documentation here.



Flatpickr can be enabled by following these steps:



1. Add the stylesheet reference (copied below) for Flatpickr in the Header of your survey Look and Feel (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>

```



2. For the question you want the datetime picker on, add JavaScript for Flatpickr to the 'addOnload' function in the JavaScript editing window (Gear icon -> Add JavaScript). Please note, you can configure the available data range, time format, etc., with the parameters provided. In the example below, I've limited the date range from today to 7 days in the future.



```

Qualtrics.SurveyEngine.addOnload(function()

{

jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, altInput: true, altFormat: "Y-m-d h:i K", dateFormat: "Y-m-d h:i K", minDate:"today", maxDate: new Date().fp_incr(7)});

});



Qualtrics.SurveyEngine.addOnReady(function()

{

/*Place your JavaScript here to run when the page is fully displayed*/



});



Qualtrics.SurveyEngine.addOnUnload(function()

{

/*Place your JavaScript here to run when the page is unloaded*/



});

```



Hopefully, that helps!
@KeirJ Thank you! I had this answered on another thread too and it is so appreciated to have the JS!

@KeirJ Awesome! I needed a calendar pick date option for a question. And, this code did the trick. Thanks a lot. 


Leave a Reply