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?

Louise_hrs wrote:

@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 

@dxconnamnguyen Thank you so much! It’s working!

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...

Louise_hrs wrote:

@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 wrote:

@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

@Nam Nguyen,

Can you please provide a script I select a date from today onwards?

FYI I’m also encountering the same issue with the arrows following the next questions.

Here is a preview.

Anything we can add to close this Java script so it doesn’t continue on?

Thanks

@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!

HI @Deepak ,

Thanks

We have followed the instructions above therefore we’ve used the stylesheet embedded in as html view as per @Nam Nguyen  instructions:

<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

@Deepak , I’ve just embedded your script and users are able to select any date. This would work for me however can you please provide a script using branch logic- If user selects date before today end survey, if user select any date from today then proceed to next block.

Thanks

@RolandH 

Use below code to start from today

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

minDate: today,

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

Thank you @Deepak 

Can you please a;sp provide a code to start from today and restrict in picker up to 5 days from today only.

@RolandH 

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

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

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