Enable Flatpickr date picker for input fields

by hcanning2012

JavaScript

(function() {
  Qualtrics.SurveyEngine.addOnReady(function() {

    var q = jQuery("#" + this.questionId);
    var input = q.find("input[type='text']")[0];

    // Calculate one month from today
    var oneMonthOut = new Date();
    oneMonthOut.setMonth(oneMonthOut.getMonth() + 1);

    // Load flatpickr CSS
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css';
    document.head.appendChild(link);

    // Add custom color override
    var style = document.createElement('style');
    style.innerHTML = '\
      .flatpickr-day.selected,\
      .flatpickr-day.selected:hover,\
      .flatpickr-day.startRange,\
      .flatpickr-day.endRange,\
      .flatpickr-day.selected.inRange {\
        background: #cc0000;\
        border-color: #cc0000;\
      }\
      .flatpickr-day:hover {\
        background: #ff3333;\
        border-color: #ff3333;\
        color: #ffffff;\
      }';
    document.head.appendChild(style);

    // Load flatpickr JS then initialize
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/flatpickr';
    script.onload = function() {
      var fp = flatpickr(input, {
        dateFormat: "m/d/Y",
        defaultDate: oneMonthOut,   // highlights date in calendar
        minDate: oneMonthOut,       // blocks earlier dates
        allowInput: false           // no manual typing
      });

      // Clear text field after init so it appears empty
      // but calendar still opens on correct month with date highlighted
      fp.input.value = '';

    };
    document.head.appendChild(script);

  });
})();