I found a similar question (
https://legacy.sawtoothsoftware.com/forum/33032/date-validation) but having trouble implementing the solution in our survey.
The beginning of our survey has a dropdown calendar (date picker) where the interviewer would select the date when they begin the interview/survey.
Currently, they can select a future date and it would still go through.
Ideally, we would like a validation where there would be an error if they selected a future date.
The HTML codes are:
<input type="text" id="[% QuestionName() %]_datepicker" autocomplete="on" readonly/>
<input name="[% QuestionName() %]_UserInput" id="[% QuestionName() %]_UserInput" type="hidden" value=""/>
<input name="[% QuestionName() %]_Unix" id="[% QuestionName() %]_Unix" type="hidden" value=""/>
<input name="[% QuestionName() %]_Year" id="[% QuestionName() %]_Year" type="hidden" value=""/>
<input name="[% QuestionName() %]_Month" id="[% QuestionName() %]_Month" type="hidden" value=""/>
<input name="[% QuestionName() %]_Day" id="[% QuestionName() %]_Day" type="hidden" value=""/>
<input name="[% QuestionName() %]_Readable" id="[% QuestionName() %]_Readable" type="hidden" value=""/>
<script>
$(document).ready(function(){
// Build UI
$('#[% QuestionName() %]_datepicker').datepicker({
// Settings
defaultDate: null, // the initial calendar date when question is first shown; for example, "new Date(2000, 0, 1)"
minDate : null, // the earliest allowed date; for example, "new Date(2000, 0, 1)"
maxDate : null, // the latest allowed date; for example, "new Date(2000, 0, 1)"
changeMonth: false, // whether to provide respondents with a month dropdown
changeYear: false, // whether to provide respondents with a year dropdown
yearRange: "2021:2021", // the range of years shown in the "changeYear" dropdown; for example, "1900:c+10" for 1900 to ten years after today
dateFormat: 'm/d/yy', // how date should be printed in textbox
firstDay: 1, // first day of week: 0 is Sunday, 1 is Monday, ...
isRTL: false, // whether to display the calendar right-to-left
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // names of months
dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], // minimized names of weekdays (starting at Sunday)
prevText: 'Prev', // tooltip text for previous month button
nextText: 'Next', // tooltip text for next month button
// Saving
onClose: function(){
$('#[% QuestionName() %]_UserInput').val($('#[% QuestionName() %]_datepicker').val());
var date = $('#[% QuestionName() %]_datepicker').datepicker('getDate');
if (date) {
$('#[% QuestionName() %]_Unix').val(date.getTime() / 1000);
$('#[% QuestionName() %]_Year').val(date.getFullYear());
$('#[% QuestionName() %]_Month').val(date.getMonth() + 1);
$('#[% QuestionName() %]_Day').val(date.getDate());
$('#[% QuestionName() %]_Readable').val($.datepicker.formatDate('m/d/yy', date));
}
else {
$('#[% QuestionName() %]_UserInput').val('');
$('#[% QuestionName() %]_Unix').val('');
$('#[% QuestionName() %]_Year').val('');
$('#[% QuestionName() %]_Month').val('');
$('#[% QuestionName() %]_Day').val('');
$('#[% QuestionName() %]_Readable').val('');
}
}
});
// Restore date
if ($('#[% QuestionName() %]_Unix').val()) {
var year = $('#[% QuestionName() %]_Year').val();
var month = $('#[% QuestionName() %]_Month').val() - 1;
var day = $('#[% QuestionName() %]_Day').val();
$('#[% QuestionName() %]_datepicker').datepicker('setDate', new Date(year, month, day));
}
})
</script>
The variables are:
CS2_UserInput
CS2_Year
CS2_Month
CS2_Day
CS2_Unix
CS2_Readable
