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!
Page 1 / 1
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!
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!
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.