Editing Only the Start or End Date in a DateRange
Environment
| Product | Progress® Kendo UI® for Angular DateRange |
Description
I want to let users edit the start date and the end date of a range independently:
- When the user focuses the start
DateInputand opens the calendar, only the start date should change. The end date must stay intact. - When the user focuses the end
DateInputand opens the calendar, only the end date should change. The start date must stay intact.
This knowledge base article also answers the following questions:
- How to prevent the start date from being overwritten when a user edits only the end date in DateRange?
- How to make the DateRange calendar update only the end date when the user focuses the end input?
- How to wire
kendoDateRangeStartInputandkendoDateRangeEndInputso each input independently controls its own range end?
Solution
By default, if you use kendoDateRangeSelection on the MultiViewCalendar or rely on the deprecated directive, the calendar resets activeRangeEnd to "start" every time the popup opens. This means the first calendar click always overwrites the start date regardless of which input the user focused.
The kendoDateRangeStartInput and kendoDateRangeEndInput directives register each input with the DateRange context, but they do not tell the calendar which end to update when the popup opens. That is controlled by the calendar's activeRangeEnd property. When it is set to "start", the next calendar click updates the start date; when set to "end", it updates the end date.
To wire this up correctly:
- Place a MultiViewCalendar inside a custom popup template with
selectionset to"range", bound to the current range value and to a component-ownedactiveRangeEndproperty. - On each DateInput, handle the focus event to update
activeRangeEndand callDateRangeService.setActiveRangeEnd()to notify the service which end is now active. This ensures the calendar opens already targeting the correct end. - Handle the calendar's hidden
rangeSelectionChangeevent to update both the local range and the active end, keeping the inputs and the calendar in sync. Note that hidden events are not part of the public API and may change in future releases.
The following example demonstrates how clicking the end input opens the calendar and the first click updates only the end date, leaving the start date intact.