​@jmborzick,

Use a Form Field question with one field and this JavaScript (field label will be hidden):

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.getQuestionContainer()), qobj = this;
	q.find(".choice-label").hide();
	q.find(".text-input").flatpickr({ 
		dateFormat: "m/d/Y",
		onChange: function(selectedDates, dateStr, instance) { qobj.setChoiceValue("1", dateStr); }
	});
});

​@TomG  thank you for your response. I added the code you included, and while the calendar appears as intended,  it is not recording the response. I have it as a required question  but after selecting the date it won’t let me advance.  To double check, I have the date piping into the following question and if I remove the requirement and go to the next page, the date doesn’t pipe in . Please advise. 

​@jmborzick,

It works for me, so there is something different on your side. Check:

1. That you are using a Form Field question, not a Text Entry question
2. Make sure the first field in your Form is field is id 1 (the pipe should end in /1).  If it isn’t, change setChoiceValue to update the appropriate id.

​@TomG  Thank you!

I started a new survey from scratch and used your code and it works as expected. Than you for your help!

Hmmm, I can’t seem to get the data value to show up in the responses with a brand new survey that has the upgraded New Survey Experience style. The new style breaks Flatpickr’s formers code but now it at least with the code below the calendar works shows up although the data doesn’t. 

I’m using the code below in the Look & Feel / General / 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>

And ​@TomG TomG’s JS in the Date question that is set to Form field:

Qualtrics.SurveyEngine.addOnload(function() { var q = jQuery(this.getQuestionContainer()), qobj = this; q.find(".choice-label").hide(); q.find(".text-input").flatpickr({ dateFormat: "m/d/Y", onChange: function(selectedDates, dateStr, instance) { qobj.setChoiceValue("1", dateStr); } }); });

​@Buck,

See (2) in my reply to ​@jmborzick above. Depending on how you reduced the form fields from 3 to 1, it’s possible that the remaining field id isn’t 1.

@TomG Thanks! I started with a new one (date) question survey and used the above code and this time it worked as desired saving the response correctly. Note the QID is Q1_1 in the CSV, and I used “1” in the setChoiceValue JS below.

 The only thing I’d add to the JS is the allowInput: true,  to let users type in their own date. 
 

Qualtrics.SurveyEngine.addOnload(function() {
    var q = jQuery(this.getQuestionContainer()), qobj = this;
    q.find(".choice-label").hide();
    q.find(".text-input").flatpickr({ 
        dateFormat: "m/d/Y",
        allowInput: true, //Allow date to be typed in
        onChange: function(selectedDates, dateStr, instance) { qobj.setChoiceValue("1", dateStr); }
    });
});

​@jmborzick and ​@Buck,

I make a slight adjustment to the JS to avoid the id issue you both apparently ran into (i.e., it will work with any id):

Qualtrics.SurveyEngine.addOnload(function() {
	var q = jQuery(this.getQuestionContainer()), qobj = this;
	q.find(".choice-label").hide();
	q.find(".text-input").flatpickr({ 
		dateFormat: "m/d/Y",
		onChange: function(selectedDates, dateStr, instance) {
			qobj.setChoiceValue(qobj.getChoices()c0], dateStr);
		}
	});
});

​@TomG Thanks, that works great.. the one thing I can’t seem to figure out is how to add the Form Element <label> as WCAG2.2 Accessibility rules call for an explicit Form <label> that is needed for non-sighted people using screenreaders. 

Ah ha.. adding this in the HTML View will fix the  Accessibility error:
<label for="form-text-input-QID1-1">Please enter a date:</label>

Or you could uncomment the line that hides the label.