How do I use input from a question as a var in the second question right below it on the same page? | XM Community
Solved

How do I use input from a question as a var in the second question right below it on the same page?

  • 28 January 2021
  • 1 reply
  • 46 views
K

I have a two text inputs for dates, one right after the other on the same page, 'from date' and 'to date'. Both use jquery datepicker for the calendar widget.
//From Date
jQuery("#"+this.questionId+" .InputText").each(function(index){
jQuery(this).datepicker({
   dateFormat : 'mm/dd/yy'
})
});
jQuery("#"+this.questionId+" .InputText").prop("readonly", true);

//To Date
jQuery("#"+this.questionId+" .InputText").each(function(index){
jQuery(this).datepicker({
dateFormat : 'mm/dd/yy',
minDate : /*whatever was entered as 'from date' + 1 day*/ })
});
jQuery("#"+this.questionId+" .InputText").prop("readonly", true);
I want to use the 'from date' (+1 day) as the 'mindate' for the 'to date', so that the user cannot select a 'to date' before the 'from date'. I've tried embedded data but I think that does not work because these questions are right after each other on the same page. I know this is not the best way to do date input, but I need it to stay like this. Any and all help is appreciated.
Thank you. 😊

icon

Best answer by ahmedA 28 January 2021, 23:41

View original

1 reply

A
Rank
Userlevel 7
Badge +21

// From Date
from_field = this.getQuestionContainer().querySelector(".InputText");
from_field.readOnly = true;


jQuery(from_field).datepicker({
    dateFormat: "mm/dd/yy",
});

//To Date
Qualtrics.SurveyEngine.addOnReady(function () {
    to_field = this.getQuestionContainer().querySelector(".InputText");
    to_field.readOnly = true;


    from_field.oninput = function () {
        var to_date = new Date(to_field.value);
        var from_date = new Date(from_field.value);
        
        // Increment the from date by one day and create min_date
        from_date.setDate(from_date.getDate() + 1);
        var min_date = (from_date.getMonth() + 1) + "/" + from_date.getDate() + "/" + from_date.getFullYear();
        
        // Update the DatePicker Element
        jQuery(to_field).datepicker("destroy");
        jQuery(to_field).datepicker({
            dateFormat: "mm/dd/yy",
            minDate: min_date,
        });
        // Clear the to date if it is less than the from date
        if (to_date <= from_date) {
            to_field.value = "";
        }
    };
});



Leave a Reply


Terms & Conditions