search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.38k stars 856 forks source link

Use range without using deprecated `is-range` or `v-model` #1415

Closed jtc42 closed 9 months ago

jtc42 commented 10 months ago

Hi,

I'm trying to get rid of the deprecation warning to stop using is-range, which points me to use the model modifier v-model.range.

However, we don't use v-model in our usage, rather

...
        :model-value="modelValue"
        @update:modelValue="onInput"
...

This allows us to propagate the model up to a parent component. I cannot for the life of me though find any way to have it bind and emit a date range, because it's unclear where else that modifier could go.

Do you have any advice? Happy to clarify what I'm trying to say if needed.

Thanks.

tho-masn commented 9 months ago

I'm just trying to figure out the same thing. Is there any workaround to use the .range modifier in combination with the :model-value / @update:modelValue syntax?

Edit: Found the solution: https://github.com/nathanreyes/v-calendar/issues/1381#issuecomment-1752016365

jtc42 commented 9 months ago

I'm just trying to figure out the same thing. Is there any workaround to use the .range modifier in combination with the :model-value / @update:modelValue syntax?

Edit: Found the solution: #1381 (comment)

Oh thanks for the solution! We've just been binding it to a computed property with a getter and setter as a kind of proxy, see https://github.com/renalreg/ukrdc-nuxt-3/blob/main/components/base/BaseDateRange.vue#L118

I think your way is better though!