Issue in JavaScript - Flatpickr | XM Community
Skip to main content
Michael_Cooksey
Administrator
22 days ago
Solved

Issue in JavaScript - Flatpickr

V
QPN Level 2 ●●
Forum|alt.badge.img+4

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);

});

Best answer by Nam Nguyen

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

View original

3 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • Answer
  • October 3, 2023

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

Nam Nguyen - XM Technology Consultant | DXCON Vietnam
V
1 person likes this
  • V
    Vinay_Bohra
V
QPN Level 2 ●●
Forum|alt.badge.img+4
  • Vinay_Bohra
  • Author
  • QPN Level 2 ●●
  • 10 replies
  • October 4, 2023

Hi @dxconnamnguyen, this worked. Thanks!

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • October 4, 2023

@Vinay_Bohra Happy to help 👍

Nam Nguyen - XM Technology Consultant | DXCON Vietnam

Leave a Reply


Terms & Conditions