Skip to main content

change

Description​

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

Parameters​

Example​

<script>
    function handleChange(ev){
        const newValue = ev.detail;
        console.log(newValue); 
    }
</script>

<RangeCalendar on:change={handleChange}/>

Details​

The handler function returns 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