Return to Question

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

Here is my code:

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 min and max value of datepicker, because in this case, it always destroys and creates a new datepicker on every date change, and also creates an object for configuration which may cause lot of memory waste. Please tell what would be a better approach of setting min and max value of datepicker.

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.

I implemented date range picker logic using jQUery UI datepicker component. Here is my code:

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 min and max value of datepicker, because in this case, I always need to first destroy and then create a new datepicker on every date change, and also create an object for configuration which may cause lot of memory waste. Please tell what would be a better approach of setting min and max value of datepicker.

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

Here is my code:

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 min and max value of datepicker, because in this case, it always destroys and creates a new datepicker on every date change, and also creates an object for configuration which may cause lot of memory waste. Please tell what would be a better approach of setting min and max value of datepicker.