Date/Time picker for browsers that don't support the datetimelocal input

Question

I have this code that shows date pickers when the browser doesn't support <input type="datetime-local">.

Any tips on optimizing this code?

if (!Modernizr.inputtypes.date) {
    $(function () {
        var d = Date.parse($('#StartDatePicker').val());
        $('#StartDatePicker').val($.format.date(d, "yyyy-MM-dd hh:mm a"));
        d = Date.parse($('#EndDatePicker').val());
        $('#EndDatePicker').val($.format.date(d, "yyyy-MM-dd hh:mm a"));

        var startDateTextBox = $('#StartDatePicker');
        var endDateTextBox = $('#EndDatePicker');
        startDateTextBox.datetimepicker({
            dateFormat: "yy-mm-dd",
            timeFormat: "hh:mm TT",
            minuteGrid: 10,
            addSliderAccess: true,
            sliderAccessArgs: {
                touchonly: false
            },
            onClose: function (dateText, inst) {
                if (endDateTextBox.val() != '') {
                    var testStartDate = startDateTextBox.datetimepicker('getDate');
                    var testEndDate = endDateTextBox.datetimepicker('getDate');
                    if (testStartDate > testEndDate) endDateTextBox.datetimepicker('setDate', testStartDate);
                } else {
                    endDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate'));
            }
        });

        endDateTextBox.datetimepicker({
            dateFormat: "yy-mm-dd",
            timeFormat: "hh:mm TT",
            minuteGrid: 10,
            addSliderAccess: true,
            sliderAccessArgs: {
                touchonly: false
            },
            onClose: function (dateText, inst) {
                if (startDateTextBox.val() != '') {
                    var testStartDate = startDateTextBox.datetimepicker('getDate');
                    var testEndDate = endDateTextBox.datetimepicker('getDate');
                    if (testStartDate > testEndDate) startDateTextBox.datetimepicker('setDate', testEndDate);
                } else {
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate'));
            }
        });

    });
}

Answer 1

Yes there is a fair amount of repeated code - e.g. the options:

        dateFormat: "yy-mm-dd",
        timeFormat: "hh:mm TT",
        minuteGrid: 10,
        addSliderAccess: true,
        sliderAccessArgs: {
            touchonly: false
        },

These could be abstracted to a common object that gets extended with each call to datetimepicker() using Object.assign()

const commonOptions = {
    dateFormat: "yy-mm-dd",
    timeFormat: "hh:mm TT",
    minuteGrid: 10,
    addSliderAccess: true,
    sliderAccessArgs: {
        touchonly: false
    }
};

startDateTextBox.datetimepicker(Object.assign({
    onClose: function (dateText, inst) {
        if (endDateTextBox.val() != '') {
            const testStartDate = startDateTextBox.datetimepicker('getDate');
            const testEndDate = endDateTextBox.datetimepicker('getDate');
            if (testStartDate > testEndDate) endDateTextBox.datetimepicker('setDate', testStartDate);
        } else {
            endDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime) {
        endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate'));
    }
}, commonOptions));
endDateTextBox.datetimepicker(Object.assign({      
    onClose: function (dateText, inst) {
        if (startDateTextBox.val() != '') {
            const testStartDate = startDateTextBox.datetimepicker('getDate');
            const testEndDate = endDateTextBox.datetimepicker('getDate');
            if (testStartDate > testEndDate) startDateTextBox.datetimepicker('setDate', testEndDate);
        } else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function (selectedDateTime) {
        startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate'));
    }
}, commonOptions));

The onClose function could be abstracted to a function that accepts the picker to modify as a parameter.

It appears there is an option in the datetimepicker documentation for a Range between date selection - it uses just the onShow option to set the min and max dates:

jQuery(function(){
 jQuery('#date_timepicker_start').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
   })
  },
  timepicker:false
 });
 jQuery('#date_timepicker_end').datetimepicker({
  format:'Y/m/d',
  onShow:function( ct ){
   this.setOptions({
    minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
   })
  },
  timepicker:false
 });
});