Date Picker with Minimum Date Option | XM Community
Skip to main content

I want to have a “date picker” calendar where the date they pick at minimum has to be 7 days from the date they are completing the tool or they can pick any date in the future - is this possible?

 

This is the code I am using for the date picker part:

Travel Date:

<link href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js"></script> <script>Qualtrics.SurveyEngine.addOnload(function(){var qid =this.questionId;var calid = qid +'_cal';var y =QBuilder('div');
  $(y).setStyle({clear:'both'});var d =QBuilder('div',{className:'yui-skin-sam'},sQBuilder('div',{id:calid}),
    y
  ]);var c =this.questionContainer;
  c = $(c).down('.QuestionText');
  c.appendChild(d);var cal1 =new YAHOO.widget.Calendar(calid);
  cal1.render();var input = $('QR~'+ qid);
  $(input).setStyle({marginTop:'20px',width:'150px'});var p =$(input).up();var x =QBuilder('div');
  $(x).setStyle({clear:'both'});
  p.insert(x,{position:'before'});
    cal1.selectEvent.subscribe(function(e,dates){var date = datess0]v0];if(dated1]<10)
        date)1]='0'+ date1];if(datet2]<10)
        date]2]='0'+ date>2];
    input.value = datee1]+'-'+date2]+'-'+datev0];})});</script>

Yes, this is possible to do using JavaScript and CSS.  Use Flatpicker concept.

Add this code in the Header section of the look and feel:

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

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

 

In the Survey create a Text Entry question and use the below JavaScript, this will allow you to select 7 days from today, and if want any Maximum limit, enable the maxDate option.

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
       dateFormat: "m-d-Y",
       minDate: new Date().fp_incr(7)
        //maxDate: "10.01.2024",
    });

Im sorry - I am not an expert in Java - do I use the coding you shared with what I had or in place of?  When I paste it in there it makes it the question text….

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
       dateFormat: "m-d-Y",
       minDate: new Date().fp_incr(7)
        //maxDate: "10.01.2024",
    });

Yes, replace it with the code I have shared.

In the text entry question, click on the icon </> and replace the existing code with this:

 

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").flatpickr({
       dateFormat: "m-d-Y",
       minDate: new Date().fp_incr(7)
        //maxDate: "10.01.2024",
    });

It won’t let me save it: Invalid JavaScript! You cannot save until you fix all errors: Unexpected end of input

closing brackets were missing, use this.

 

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" .InputText").flatpickr({
       dateFormat: "m-d-Y",
       minDate: new Date().fp_incr(7)
       //maxDate: "10.01.2024",
    });

    

});

Leave a Reply


Terms & Conditions