Value not saving with flatpicker on jquery embedded data set text entry | XM Community
Skip to main content

I have a text entry question with flatpickr to pick a date, and jquery using embedded data (if it exists) to set the date text. (The idea is that if we already have a date on file, it fills that; otherwise, the user picks a date). This works, filling the text entry space with the date on file.
---- so JS on text entry questions
Qualtrics.SurveyEngine.addOnload(function(){
jQuery("#"+this.questionId+" .InputText").flatpickr(  {
   altInput: true,
   altFormat: "F j, Y",
   maxDate: new Date(),
   dateFormat: "Y-m-d",
});
   if ("${e://Field/doseDate1}" ) {   
       jQuery("#"+this.questionId+" .InputText").val("${e://Field/doseDate1}");
}});
----
On the next page, I have piped text set up to show the selected choice for the question (as a test). If I select a value from the calendar, the choice appears. If I don't pick one and just leave the date that was filled by the embedded data, the selected choice pipe text is blank. So-- dates populated by jquery don't save to Qualtrics but dates the user selected do. AND if the user selects a new date on a prepopulated text entry field, the new date saves.
If I remove the flatpickr code, it works- so the problem is the interaction with flatpickr.... but how to fix it?

Hello, for anyone else with this problem. I just worked around it and removed the flatpickr for pre-existing dates and added instructions to the user "it'll be format 2022-02-21 if prefilled and format September 02, 2012 if not".
There's a "default date" option in flatpickr, but I couldn't get it to save upon submitting the survey.
Then to the JS on the question, I added an if/else
   if ("${e://Field/doseDate1}" ) {   
       jQuery("#"+this.questionId+" .InputText").val("${e://Field/doseDate1}");
}
else {
jQuery("#"+this.questionId+" .InputText").flatpickr(  {
   altInput: true,
   altFormat: "F j, Y",
   maxDate: new Date(),
   dateFormat: "Y-m-d",
})};


Leave a Reply