Events

Open & Close 1.0.0+

                
<date-picker @open="open" @close="close" />

                
methods: {
    open() {
        console.log('opened')
    },
    close() {
        console.log('closed')
    }
}

Open the devtools and see the result.

Clear 2.3.0+

                
<date-picker clearable @clear="clear" />

                
methods: {
    clear() {
        console.log('cleared')
    },
}

Open the devtools and see the result.

Select 1.0.0+

When a date selected, this event to be emitted.

                
<date-picker @select="select" />

                
methods: {
    select(date) {
        this.date = date.toString();
    },
}

select and change event, passed PersianDate instance into the event handler.

Submit 1.0.0+

In v2 name of this event changed from "change" to "submit".

When datepicker submit and the selected date is change, this event to be emitted.

If the mode prop equal to range, array passed into the event handler

                
<date-picker @submit="submit" />

                
methods: {
    submit(date) {
        let start = date[0];
        let end   = date[1];
        this.dayCount = end.diff(start, 'date');
    },
}

{{date.events.submit}} days selected.

Other events 1.0.0+

You can pass the all of input element events to component.

The all of events listen to input element

                
<date-picker @focus="focus" @keypress="keypress" />

                
methods: {
    focus() {
        console.log('focused')
    },
    keypress() {
        console.log('key pressed')
    }
}

Open the devtools and see the result.