Issue in JavaScript - Flatpickr | XM Community
Skip to main content

Hi All,

I am using below mentioned Jquery to use faltpickr and store some embedded data fields but am facing some issues.

  1. I am pulling value of minDate from embedded data field which is in the format of ‘DD-MM-YYYY’ but the code is not able to capture that.  
  2. I am calculating maxdays variable by subtracting ‘fsi’ from ‘lpi’ but the code is unable to do so

Can you please help me see if there is any error in the code which might be required to solve above mentioned two issues? 

 

Qualtrics.SurveyEngine.addOnReady(function(){
jQuery("#"+this.questionId+" .InputText").flatpickr({altInput: true, altFormat: "F d, Y", dateFormat: "Y/m/d",
                                                          minDate: "${e://Field/date}", maxDate: "${e://Field/lpi}" });
});

Qualtrics.SurveyEngine.addOnPageSubmit(function() {
    
    var fsi = document.getElementById('QR~QID45').value;    
    var lpi = "${e://Field/lpi}";
    moment.locale('en-IN');
    var fsi = moment(fsi).format("DD-MM-YYYY");
    var lpi = moment(lpi).format("DD-MM-YYYY");
    var maxdays = moment(lpi).diff(fsi, 'days', true).toFixed(0);
    Qualtrics.SurveyEngine.setEmbeddedData('fsi', fsi);
    Qualtrics.SurveyEngine.setEmbeddedData('maxdays', maxdays);

});

There are a few things that could be causing the issues like the date format expected by flatpickr is "Y-m-d" but your date field is in "DD-MM-YYYY" format, Moment's recognized format like "YYYY-MM-DD".

Try this:

Qualtrics.SurveyEngine.addOnReady(function(){

  var minDate = "${e://Field/date}"; 
  minDate = moment(minDate, "DD-MM-YYYY").format("Y-MM-DD");

  jQuery("#"+this.questionId+" .InputText").flatpickr({
    altInput: true, 
    altFormat: "F d, Y",
    dateFormat: "Y/m/d",
    minDate: minDate 
  });

});

Qualtrics.SurveyEngine.addOnPageSubmit(function() {

  var fsi = document.getElementById('QR~QID45').value;     
  var fsi = moment(fsi, "DD-MM-YYYY").format("YYYY-MM-DD");
  var lpi = moment("${e://Field/lpi}", "DD-MM-YYYY").format("YYYY-MM-DD");
  var maxdays = moment(lpi).diff(fsi, 'days');

  Qualtrics.SurveyEngine.setEmbeddedData('fsi', fsi);
  Qualtrics.SurveyEngine.setEmbeddedData('maxdays', maxdays);

});

Let me know if that helps resolve the issues

Hi @dxconnamnguyen, this worked. Thanks!

@Vinay_Bohra Happy to help 👍

Leave a Reply


Terms & Conditions