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.

Well I think I came up with a hack to get it to work.

Since the question is required, some value needs to be stored. So I set the question to have a default value of today’s date, so it stores that into the question to pass the requirement, but then stores the FlatPickr value into the embedded data because that’s the value I care about. 

When testing the field, the default value doesn’t actually display in the field, so the user doesn’t necessarily see that the question is storing today’s date. Which is inconsequential.

@courtrc Something I've noticed about Simple layout is that it forces clarity around which text data was created with JavaScript. Only being able to set Embedded Data to __js_ Embedded Data fields and being unable to set the value of text inputs in a way where the value is retained on page submit ensures that __js_ Embedded Data fields are the only fields that will contain text data created through custom JavaScript.

Since the Flatpickr selection is not being saved to the text input in a way that makes it to Qualtrics, it considers this field blank and throws a Force Response error. In your workaround, I don't think Force Response will ever trigger since the text input will always have a value in it through Default Choices.

Another approach to add Force Response to a Flatpickr text input is to have a hidden Multiple Choice question with Force Response enabled on the same page as the Flatpickr question that listens for any change to the text input and adds an answer to the MC question if a change is detected. The respondent can then only advance in the survey if a Flatpickr selection is made. To give it a try, create a Multiple Choice question after the Flatpickr text input, enable Force Response on it, and add the below to the MC question's JavaScript in the OnReady section:

//hide mulitple choice question
jQuery("#question-"+this.questionId).css({"display":"none"});

//define text input
jQuery("#question-"+this.questionId+" .text-input").eq(0).attr('id','text1');
var text1 = document.getElementById("text1");

//add event listener to text input to answer MC if text input is updated
var that=this;
text1.addEventListener('change', function () {
that.setChoiceValue(1, true);
});