Datetime Pickr | XM Community
Skip to main content
Solved

Datetime Pickr

  • October 12, 2019
  • 3 replies
  • 1077 views

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

Best answer by KeirJ

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!
View original

3 replies

KeirJ
QPN Level 2 ●●
Forum|alt.badge.img+7
  • QPN Level 2 ●●
  • 81 replies
  • Answer
  • October 21, 2019
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!

cma
  • Author
  • 24 replies
  • October 21, 2019
@KeirJ Thank you! I had this answered on another thread too and it is so appreciated to have the JS!

Forum|alt.badge.img+1
  • Level 1 ●
  • 10 replies
  • October 11, 2024

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


Leave a Reply