Have an idea?

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

Date Picker Sript

Dear All,

Related to script of Date Picker by Zachary, I want to disable input date. Just select the date by drop down list.

Is it possible?
asked Sep 20, 2019 by Saroeun Bronze (1,945 points)

1 Answer

0 votes
Setting "readonly" on the input element seems to do the trick.  Give this a try:

<input type="text" id="[% QuestionName() %]_datepicker" autocomplete="off" readonly="readonly"/>

<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
        dateFormat: 'd/m/yy', // how date should be printed in textbox
        firstDay: 1, // first day of week: 0 is Sunday, 1 is Monday, ...
        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(){
            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('d/m/yy', date));
            }
            else {
                $('#[% 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>
answered Sep 20, 2019 by Zachary Platinum Sawtooth Software, Inc. (144,125 points)
...