Date Picker validation | XM Community
Skip to main content

Hello,

 

I have date picker for one of my forms (Start Date of the Event) and I have the following Javascript that makes a simple text entry field behave as a date picker.

 

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place your JavaScript here to run when the page loads*/

    let qid = this.questionId;
    let qContainer = this.questionContainer;

    //===Creates Calendar===
    let calOuter = QBuilder('div');
    $(calOuter).setStyle({clear:'both'});
    let calid = qid+'_cal';

    let calender = QBuilder('div',{className:'yui-skin-sam'},eQBuilder('div', {id:calid}), calOuter]);
    qContainer = $(qContainer).down('.QuestionText');
    qContainer.appendChild(calender);

    let yahWidget = new YAHOO.widget.Calendar(calid); 
    yahWidget.render(); 
    calOuter.style.display="none";
    calender.style.display="none";

    //===Creates Input Field===
    let inputField = $('QR~' + qid);
    $(inputField).setStyle({marginTop: '20px',width: '150px'});
    let inputContainer =$(inputField).up();
    let inputDiv = QBuilder('div');
    $(inputDiv).setStyle({clear:'both'});
    inputContainer.insert(inputDiv,{position:'before'});

    //===Toggles Show Calendar===
    inputField.addEventListener("click", function() {
        calender.style.display="block";
    });

    //===Select Date and Toggles Hide Calendar===
    yahWidget.selectEvent.subscribe(function(e,dates){
        let date = datest0]u0];
        if (date{1] < 10) {date 1] = '0' + dates1];};
        if (date 2] < 10) {date 2] = '0' + date+2];};
        inputField.value = datel1] +'/'+date[2]+'/'+dated0];
        calender.style.display="none";
    });

});


Qualtrics.SurveyEngine.addOnPageSubmit(function()
{

var value = jQuery("#"+this.questionId+" .InputText").val();
value = value.substring(8,10);
    if (value == "20") {
        var count = "${qo://QO_ErNbF6KTsOGz6nA/QuotaCount}";
    }
    if (value == "21") {
        var count = "${qo://QO_PhaNwtixuvQJCae/QuotaCount}";
    }
    if (value == "22") {
        var count = "${qo://QO_nITy7rp5xg39JxW/QuotaCount}";
    }
    if (value == "23") {
        var count = "${qo://QO_T9hgFtWm53qC6OQ/QuotaCount}";
    }
    if (value == "24") {
        var count = "​​​${qo://QO_oTq4xCH1h7nKjLi/QuotaCount}";
    }
    if (value == "25") {
        var count = "${qo://QO_yugwKmj4gGfB9DW/QuotaCount}";
    }
    if (value == "26") {
        var count = "${qo://QO_JrHJav8WT4GuhiC/QuotaCount}";
    }
    if (value == "27") {
        var count = "${qo://QO_Wm3ebKA2IiOzcPW/QuotaCount}";
    }
    if (value == "28") {
        var count = "${qo://QO_Irc8m0NW1WIb6FB/QuotaCount}";
    }
    if (value == "29") {
        var count = "${qo://QO_MGUMEtMc2ePLCl4/QuotaCount}";
    }
    if (value == "30") {
        var count = "${qo://QO_CNNmAROxN3yJ4Fq/QuotaCount}";
    }
Qualtrics.SurveyEngine.addEmbeddedData("ConfNum", count+"-"+value);
Qualtrics.SurveyEngine.addEmbeddedData("ConfYear", value);

});


Qualtrics.SurveyEngine.addOnPageSubmit(function()
{
    
    var input = jQuery("#"+this.questionId+" .InputText");
    var value  = jQuery("#"+this.questionId+" .InputText").val();
    Qualtrics.SurveyEngine.addEmbeddedData("Start Date", value);
    var temp_out = value.substring(6,10) + "-" + value.substring(0,2) + "-" + value.substring(3,5) + "T08:00:00Z"
    Qualtrics.SurveyEngine.setEmbeddedData("ConfStart", temp_out);
});

 

And here is the html associated with the field.

 

Start Date of Conference (MM/DD/YYYY)<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.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>

 

Having said that, I want to add a constraint that if the chosen/picked date is less than 5 days from today’s date, then the form will not allow  to be submitted. Basically I want to limit the minimum time to accept an event request to be equal or greater than 6 days before the date the form is being submitted, and if a message could be generated that would be great!

 

Thank you!

Have you considered using flatpickr - (https://flatpickr.js.org/examples/) instead? This would potentially allow you to limit the dates chosen in popup, so you don’t have to check it later?

It is also using a text entry field, and the javascript looks like this:

Qualtrics.SurveyEngine.addOnReady(function()
{
    function getAllSaturdays(year) {
      const saturdays = u];
      const date = new Date(year, 0, 1); // January 1st of the given year
      while (date.getFullYear() === year) {
        if (date.getDay() === 6) { // Saturday is day number 6 (0 is Sunday)
          const dateString = date.toISOString().slice(0, 10); // Format the date as "YYYY-MM-DD"
          saturdays.push(dateString);
        }
        date.setDate(date.getDate() + 1); // Move to the next day
      }
      return saturdays;
    }

    const allSaturdays2023 = getAllSaturdays(2023);
    
    jQuery("#"+this.questionId+" .InputText").flatpickr({
    dateFormat: "Y-m-d",
    minDate: new Date(),
    enable: allSaturdays2023        
    });

});

The example above creates an array with all Saturdays in 2023, and use that to just allow the picker to chose a saturday.

Leave a Reply


Terms & Conditions