Flatpickr date not storing data with survey

Your jQuery selector is incorrect, so it isn’t finding the Qualtrics input field.  Replace .text-input with .InputText.

@courtrc, thanks for the info, and sorry for the confusion on my reply. Yes, I was just checking to see if selecting the date from Flatpickr did at least put the date in the field. It sounds like Tom has a potential fix, hope it works! Y’all are awesome!

@TomG unfortunately, that change actually made it so the Flatpickr doesn’t display at all now. I’m assuming something to do again with using the Simple Layout Theme.

Hello! Sorry about that, I only tested getting Flatpickr to display, not saving the values.

This is indeed specific to Simple layout. I tried a couple methods to get the value to save to an input or embedded data field, but unfortunately none of them panned out.

Saving the value to an input field, either the input where Flatpickr is initialized or a separate/hidden input field that populates with the value of Flatpickr when a date is selected, did not work. The values get wiped away from the input fields as soon as the Next button is pressed. The value was retained in the input field IF the input field was clicked into and a keypress was recorded, but just setting the value with JS did not actually save it to the input. My attempts to simulate this keypress programmatically also did not pan out.

Saving the value to an embedded data field also did not work. When trying to use Qualtrics.SurveyEngine.setEmbeddedData, I encountered an error message in the console that I have not seen before. "setEmbeddedData deprecated, please use `setJSEmbeddedData`". I updated to Qualtrics.SurveyEngine.setJSEmbeddedData, but this does not appear to do anything at this time.

So I think currently with Simple Layout, inputs have to actually be typed into for the values to be saved. Without a way to save the Date value to an input field or to an Embedded Data field, I am not sure how to record the Flatpickr selection.
 

Happy to help, and sounds good. @AmaraW is a Community Admin and might be able to help here.

Hi @courtrc, so I found a hint on this page about setting Embedded Data and the below is working for me to store Flatpickr selections with Simple Layout. First, the hint:

setJSEmbeddedData(key, value)
Sets embedded data on the page. Only embedded data fields in the namespace _js can be set by this method.

The full process:

Add the below to the Survey's Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script>

Next, create a Text Entry question and add the below to the question's JavaScript in the OnReady section:

jQuery("#question-"+this.questionId+" .text-input").flatpickr({
    dateFormat: "Y-m-d",
	onChange: function(selectedDates, dateStr, instance) {
		Qualtrics.SurveyEngine.setJSEmbeddedData("date1",dateStr);
	}		
});

Finally, in the Survey Flow, add the following Embedded Data field at the top of the Survey Flow:

__js_date1

The Flatpickr selection will be saved to the "__js_date1" Embedded Data field, even though it being set to “date1” in the JavaScript.