You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
I'm trying to limit date range dynamically on the fly, to visualize user real range limit.
I'm don't want block user selection via RangeConfig::maxRange
In this case user select first date and can't click on date more than maxRange.
Instead this I move start date closer to end date in calendar on the fly.
When user select any range I check range in @internal-model-change and patch start date.
User at same time can see in calendar this limit.
<template>
<div>
<Datepickerv-model="date"ref="datePicker":ui="{ input: 'formControl' }"hide-input-icon:multi-calendars="datePickerMultiCalendar"@update:model-value="checkDateRange"@internal-model-change="limitDateRange"tabindex="0"auto-position="bottom"month-name-format="long":month-change-on-arrows="false":model-auto="true":range="{ partialRange: true }"locale="en"format="dd.MM.yyyy":min-date="minDate":clearable="false":enable-time-picker="false":month-change-on-scroll="false":config="{ noSwipe: true, onClickOutside: () => false, mobileBreakpoint: 600, }"
/>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from'vue';import { subDays } from'date-fns';importDatepickerfrom'@vuepic/vue-datepicker';import'@vuepic/vue-datepicker/dist/main.css';constdatePicker=ref(null);constdate=ref();constdatePickerMultiCalendar=ref(2);// 1 calendar in mobile view, 2 for DesktopfunctionhandleDatePickerSize() {datePickerMultiCalendar.value=!window?2:window.innerWidth>600?2:false;}handleDatePickerSize();onMounted(() => {window.addEventListener('resize', handleDatePickerSize, { passive:true });});onBeforeUnmount(() => {window.removeEventListener('resize', handleDatePickerSize);});functioncheckDateRange() {if (!date.value?.length) {date.value= [date.value, date.value]; }}// Limit user range no more 7 days can select. Visualize it on calendar at same time on select. // RangeConfig::maxRange is not user friendly// :model-auto="true" must be set, beacuse we allow user to select one date and convert to range later// date = [date, date] constlimitDateRange= (date) => {// Do somethingif (!date?.length||date.length===1) {return; }let startDate = date[0];constendDate= date[1];constlimitDays=7;consttestDateStart=subDays(endDate, limitDays -1);if (startDate < testDateStart) { date[0] = testDateStart; }};// See problem in code// O = () => a.value[1] ? X() : oe(Ne(a.value[0])), K = () => (a.value || []).map((l) => oe(l)), fe = (l = false) => (l || S(), t.modelAuto ? O() : y.value.enabled ? K() : Array.isArray(a.value) ? ra(() => X(), u.value.enabled) : oe(Ne(a.value))), me = (l) => !l || Array.isArray(l) && !l.length ? null : t.timePicker ? k(Ne(l)) : t.monthPicker ? z(Ne(l)) : t.yearPicker ? f(Ne(l)) : y.value.enabled ? q(Ne(l)) : t.weekPicker ? ee(Ne(l)) : x(Ne(l)), v = (l) => {// const D = me(l);// za(Ne(D)) ? (a.value = Ne(D), W()) : (a.value = null, _.value = "");//}// When @internal-model-change trying to get "Second parameter is internal model-value in v-model format"// watch(// a,// () => {// typeof t.onInternalModelChange == "function" && e("internal-model-change", a.value, R(true) <--- HERE);// },// { deep: true }//)</script>
Expected behavior
Calendar can dynamically visualize new range applied in @internal-model-change="limitDateRange"
The feature @internal-model-change working as declared in docs
The second parameter vModel is resolving in module correctly
Describe the bug
I'm trying to limit date range dynamically on the fly, to visualize user real range limit.
I'm don't want block user selection via
RangeConfig::maxRange
In this case user select first date and can't click on date more than
maxRange
.Instead this I move start date closer to end date in calendar on the fly.
When user select any range I check range in
@internal-model-change
and patch start date.User at same time can see in calendar this limit.
To Reproduce
On clean setup use this code example:
Link to test stackblitz
Expected behavior
Calendar can dynamically visualize new range applied in
@internal-model-change="limitDateRange"
The feature
@internal-model-change
working as declared in docsThe second parameter
vModel
is resolving in module correctlyDesktop & mobile (please complete the following information):
The text was updated successfully, but these errors were encountered: