change

Description

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

Parameters

• ev - (object) a CustomEvent object. Its detail property contains:
  • range - (object) an object with the newly selected start and end (when selected) dates of the range or null if the value is cleared

Example

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

<RangeCalendar on:change={handleChange}/>

Details

The handler function receives an object with the newly selected start and end (when selected) dates of the range or null if the value is cleared.

// 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