Date/Time picker for browsers that don't support the datetimelocal input I have this code that shows date pickers when the browser doesn't support &lt;input type=&quot;datetime-local&quot;&gt;.
Any tips on optimizing this code?
if (!Modernizr.inputtypes.date) {
    $(function () {
        var d = Date.parse($('#StartDatePicker').val());
        $('#StartDatePicker').val($.format.date(d, &quot;yyyy-MM-dd hh:mm a&quot;));
        d = Date.parse($('#EndDatePicker').val());
        $('#EndDatePicker').val($.format.date(d, &quot;yyyy-MM-dd hh:mm a&quot;));

        var startDateTextBox = $('#StartDatePicker');
        var endDateTextBox = $('#EndDatePicker');
        startDateTextBox.datetimepicker({
            dateFormat: &quot;yy-mm-dd&quot;,
            timeFormat: &quot;hh:mm TT&quot;,
            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 &gt; testEndDate) endDateTextBox.datetimepicker('setDate', testStartDate);
                } else {
                    endDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate'));
            }
        });

        endDateTextBox.datetimepicker({
            dateFormat: &quot;yy-mm-dd&quot;,
            timeFormat: &quot;hh:mm TT&quot;,
            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 &gt; testEndDate) startDateTextBox.datetimepicker('setDate', testEndDate);
                } else {
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate'));
            }
        });

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

        dateFormat: &quot;yy-mm-dd&quot;,
        timeFormat: &quot;hh:mm TT&quot;,
        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: &quot;yy-mm-dd&quot;,
    timeFormat: &quot;hh:mm TT&quot;,
    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 &gt; 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 &gt; 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
 });
});