[Help] DatePicker events

[creativeMH]

I can't find any documentation about events for DatePicker.

<DatePicker @click="datePickerUpdated()" id="datePicker" 
v-model.range="dateRange" :attributes="vcalendar" 
timezone="America/Toronto" :firstDayOfWeek="1" />

The ONLY event that seems to be generated by DatePicker is @click . Is this correct?

I've tried @change and nothing happens, same with @slotchange .

What I need to do is to change the display once the user has picked a start and end date.

This works, but only with @click

      datePickerUpdated() {
            console.log(" *** Date Picker Updated");
            if (this.dateRange.start  && this.dateRange.end ) {
                this.showHoursMod = true;
            }
        },

[bgaynor78]

I've found that @update:modelValue is the correct event to listen for if you want to respond to the DatePicker being updated. Here is the API mention of it. Admittedly, this doesn't really give examples, but it's how I figured it out.

https://vcalendar.io/datepicker/api.html#events

[creativeMH]

I got this working:

<div class="col-span-3 sm:col-span-3 mt-3">
     <InputLabel for="datePicker" value="Please select Start and End dates"/>
     <DatePicker  @click="datePickerUpdated()" id="datePicker" v-model.range="dateRange" :attributes="vcalendar" timezone="America/Toronto" :firstDayOfWeek="1" />
</div>

[creativeMH]

@bgaynor78 I never got that @update:modelValue to work, so I'd need to see your example.

However, it works fine with @click for me.

[bgaynor78]

@creativeMH sure. Here is the function that I am using that, when a date range is selected, changes the times to be something besides midnight of the days selected:

const handleDatePickerChange = event => {
    const startDate = dayjs(event.start).hour(8).minute(0).second(0).toDate();
    const endDate = dayjs(event.end).hour(22).minute(0).second(0).toDate();

    form.dates.start = startDate;
    form.dates.end = endDate;

    calKey.value++;
}

The calKey is important in my case, and actually comes from another issue where after changing the values, the datepicker doesn't actually change it's display...since it appears the component doesn't re-render. I'm using a manual key change to force the datepicker to re-render itself. You may not need to do that in your case, but thought I'd mention it for clarity.

Then in my template, I'm just using the @update:modelValue event to call my function:

<DatePicker
    :key="calKey"
    id="date"
    :attributes="datePickerAttrs"
    v-model.range="form.dates"
    @update:modelValue="handleDatePickerChange"
    mode="dateTime"
    expanded
    title-position="left"
    color="teal"
    ref="dataPickerRef"
    class="font-sans"
/>

Hope this helps, or at least makes it more clear. I'm not sure if it really matters which way you do it though.