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​

<script>
  function handleChange(ev) {
       const newValue = ev;
       console.log(newValue); 
       // check the details for the return value
  }
</script>

<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