8
\$\begingroup\$

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.

\$\endgroup\$
2
  • 1
    \$\begingroup\$ This sounds more like a question for Stack Overflow. See e.g. stackoverflow.com/questions/13721161/… or stackoverflow.com/questions/16267903/… \$\endgroup\$ – Guy Incognito Mar 17 '17 at 10:12
  • \$\begingroup\$ Agree with comment from @GuyIncognito that this looks more well-suited for SO since poster is truly looking for alternate implementation advice for a known limitation of the code rather than more of an open-ended code review. More likely to get a larger set of eyes on the problem over there as well. \$\endgroup\$ – Mike Brant Mar 20 '17 at 20:46
4
\$\begingroup\$

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
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Start Date: <input type="text" id="Start"></p>
<p>End Date: <input type="text" id="End"></p>

\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.