Flatpickr code formatting | XM Community
Skip to main content

Greetings to all,

 

In my survey, I have a flatpickr calendar that I need help formatting the code for. I need the code to display:

  • an incline calendar
  • Date format changed to mm/dd/yyyyy
  • exclude weekends from being selected
  • date selection begins a week in advance
    • If today’s date is 10/10/23, the next available date that can be selected will be 10/17/23.
    • I would also love if the code could automate so that I would not have to input new code weekly
  • remove the time displayed on the calendar
  • display more than one week in advance.
    • Ex: If today’s date is 10/10/23, the option to book a date on 11/12/23 should be available.

Here is the code that I found online. However, when this code is put into the JavaScript, I receive an error message.

  • incline code
    • {
          inline: true
      }

 

  • Disabling date code
    • {
          "disable": d
              function(date) {
                  // return true to disable
                  return (date.getDay() === 0 || date.getDay() === 6);

              }
          ],
          "locale": {
              "firstDayOfWeek": 1 // start week on Monday
          }
      }

  • Current code
    • Qualtrics.SurveyEngine.addOnload(function()
      {{ jQuery("#"+this.questionId+" .InputText").flatpickr({enableTime: true, altInput: true, altFormat: "M-d-y h:i K", dateFormat: "M-d-y h:i K", minDate:"today", maxDate: new Date().fp_incr(7)}); }

      });

Please let me know if any additional information is needed. Your assistance with this is greatly appreciated!

You need to add the options to the flatpickr function call. In your case:

Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" .InputText").flatpickr({
inline: true,
disable: [
function(date) {
return (date.getDay() === 0 || date.getDay() === 6);
}
],
locale: {
firstDayOfWeek: 1
},
dateFormat: "m/d/Y",
minDate:new Date().fp_incr(7)
});
});

 


Thank you so much! It worked beautifully!


Leave a Reply