New to Kendo UI for jQuery? Download free 30-day trial

Customizing DateRangePicker Behavior in Kendo UI

Description

When using the DateRangePicker control, selecting an end date updates the start date field instead of the end date field. The goal is to ensure that when either the start or end date is selected, the corresponding field updates accurately, providing a seamless user experience.

This KB article also answers the following question:

  • What code changes are required to update the start and end dates correctly in DateRangePicker?

Solution

To achieve the desired behavior, implement custom logic using the change and open events of the DateRangePicker. This solution involves tracking the selected start and end dates and updating them based on user interactions.

  1. Initialize the DateRangePicker and define custom logic:
$(document).ready(function() {
    var savedRange = {};

    $("#daterangepicker").kendoDateRangePicker({
        change: function() {
            var range = this.range();

            if (!savedRange.start && range.start) {
                savedRange.start = range.start;
            } 

            if (range.start && range.end) {
                savedRange = range;
            } else if (range.start) {
                var newDate = range.start;

                if (newDate > savedRange.start) {
                    savedRange.end = newDate;
                } else {
                    savedRange = { start: newDate, end: null };
                }
            }
            this.range(savedRange);
        },
        open: function() {
            if (savedRange.start || savedRange.end) {
                this.range(savedRange);
            }
        }
    });
});
  1. Test the behavior with a dojo example:

Visit the dojo example at https://dojo.telerik.com/NShpKjFe to see the custom behavior in action.

See Also

In this article