Make To and From date range picker using jQuery UI

I implemented date range picker logic using the jQUery UI datepicker component:

var onDocumentReady = function () {
        var datepickerConfiguration = {
            dateFormat: "dd/mm/yy"
        };

        var startDatepickerHandler = function () {
            var selectedDate = $(this).val();
            var newConfiguration = Object.create(datepickerConfiguration);
            newConfiguration.minDate = moment(selectedDate, "DD/MM/YYYY").toDate();
            $("#End").datepicker('destroy');
            $("#End").datepicker(newConfiguration);
        };

        var endDatepickerHandler = function () {
            var selectedDate = $(this).val();
            var newConfiguration = Object.create(datepickerConfiguration);
            newConfiguration.maxDate = moment(selectedDate, "DD/MM/YYYY").toDate();
            $("#Start").datepicker('destroy');
            $("#Start").datepicker(newConfiguration);
        };

        ///--- Component Binding ---///
        $('#Start').datepicker(datepickerConfiguration);
        $('#End').datepicker(datepickerConfiguration);

        $('#Start').on('change', startDatepickerHandler);
        $('#End').on('change', endDatepickerHandler);

    };
    $(document).ready(onDocumentReady);

But I am not satisfied with this approach of setting the min and max values of datepicker, because in this case, it always destroys and creates a new datepicker on every date change. It also creates an object for configuration which may cause lot of memory waste. Please tell what would be a better approach of setting the min and max values of datepicker.

Instead of destroying and recreating the datepickers, use the (3rd) option method (e.g. .option('maxDate', selectedDate)) to set the minDate/maxDate options when appropriate.

Also, by utilizing the onSelect option, which receives as arguments the selected date and the datepicker instance, instead of using an onChange handler, MomentJS can be eliminated.

Lastly, the two id selectors can be combined in the same jQuery call:

$('#Start, #End').datepicker(datepickerConfiguration);

See the simplified code below.

Another option might be to consider a daterange picker UI widget like this one but perhaps the current UI is desired.



//use this one handler for both Start and End Date pickers
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') { //Start date selected - update End Date picker
$("#End").datepicker('option', 'minDate', selectedDate);
} else { //End date selected - update Start Date picker
$("#Start").datepicker('option', 'maxDate', selectedDate);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
dateFormat: "dd/mm/yy",
onSelect: onDateSelect
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration


Start Date:

End Date:

StackExchange Code Review Q#158001, answer score: 4