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.
// 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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.