Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Date validation in a dropdown calendar (date picker)

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
related to an answer for: Date validation
asked May 16 by wfung (275 points)
edited May 16 by wfung
The custom verification in the earlier question includes forbidding that future dates be selected.  If you set your question's validation to that, do you get the effect you want?

Alternatively, we may be able to skip custom verification altogether because you have "readonly" enabled.  Updating your line 17 to this should disable future dates in the dropdown from being selected at all:

maxDate: 0,
Thank you so much Zachary!
Changing line 17 worked.
Sorry... this seems so simple now. I'm taking over for someone until we can hire their replacement, and I don't know HTML/JAVA codes.
Nothing to apologize for.  I had to look at jQuery's documentation to be sure how to best set the max date to today myself.

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...