Skip to main content

onChange

Description​

Fires when a new date or a date range is selected in a RangeCalendar

Usage​

onChange?: (ev: { start: Date | null; end: Date | null }) => void;

Parameters​

The onChange handler receives the ev object with the next properties:

  • start - (required) the first date of the selected range. It is null until the user selects the start date
  • end - (required) the last date of the selected range. It is null until the user selects the end date

Example​

function handleChange(ev: { start: Date | null; end: Date | null }) {
  const newValue = ev;
  console.log(newValue);
  // check the details for the return value
}

// Usage in JSX:
<RangeCalendar onChange={handleChange} />

Details​

The handler function receives an object with the newly selected start and end (when selected) dates of the range.

// when the end date of the range isn't selected:
{ start: Tue Mar 08 2022 00:00:00 GMT+0300, end: null }
// when both start and end dates of the range are selected:
{ start: Tue Mar 08 2022 00:00:00 GMT+0300, end: Thu Apr 07 2022 00:00:00 GMT+0300 }

Related article: Catching the change of the selected range