Date Picker w/ data validation

@Louise_hrs Make a Text entry question then add this code to the HTML source

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Pick the date at least 14 days from today

Add this code to the Custom JavaScript

Qualtrics.SurveyEngine.addOnload(function() {
  var questionId = this.questionId;
  var today = new Date();
  var minDate = new Date(today.setDate(today.getDate() + 14)).toISOString().split('T')[0];
  jQuery("#"+questionId+" .InputText").flatpickr({
    minDate: minDate,
    dateFormat: "Y-m-d", 
    disable: [
      function(date) {
        return (date < new Date());
      }
    ]
  });
});

Hope this helps

@dxconnamnguyen Emm...I tried what you suggested, tho it seems that the calendar doesn’t pop up when answering the question. Do you know how to fix it?

 

HTML source is in Rich Content Editor → Source. @Louise_hrs 

Happy to help 👍

@dxconnamnguyen So sorry to bother you again. The question itself works now, however, the following characters show up on the next page when I try the survey...

 

The next page shouldn’t get affected by the previous one. Did you add something in your footer?

@dxconnamnguyen I didn’t change the code or the source. That is really strange. I got that same ‘<>, day, random number’  below every page after the questions. When I move this question to the last page, it won’t happen.

 

@Louise_hrs Try delete that question to see if the error still there. You can set it up again later

@RolandH & @Louise_hrs 
For showing calendar from today
 

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({


	dateFormat: "Y-m-d"});
});

For showing after 14 days use

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({



    minDate: new Date().fp_incr(14) ,

	dateFormat: "Y-m-d"});
});

Header would remain the same as mentioned in above replies.

Also, the arrows seem to be CSS issue do you mind sharing if you have included any other codes in survey.

Hope this helps!

@RolandH 

Use below code to start from today

Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+".InputText").flatpickr({

minDate: today,

dateFormat: "Y-m-d"}); });

@RolandH 

Qualtrics.SurveyEngine.addOnload(function() { jQuery("#"+this.questionId+".InputText").flatpickr({

minDate: today,
maxDate: new Date().fp_incr(5) ,

dateFormat: "Y-m-d"}); });