diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 966ec0b44..8d9b12f7c 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -116,6 +116,7 @@ export default defineComponent({ 'overRange', 'update:show', 'clickSubtitle', + 'clickDisabledDate', ], setup(props, { emit, slots }) { @@ -486,6 +487,7 @@ export default defineComponent({ 'allowSameDay', ])} onClick={onClickDay} + onClickDisabledDate={(item) => emit('clickDisabledDate', item)} /> ); }; diff --git a/packages/vant/src/calendar/CalendarDay.tsx b/packages/vant/src/calendar/CalendarDay.tsx index 335f704d4..634148f1b 100644 --- a/packages/vant/src/calendar/CalendarDay.tsx +++ b/packages/vant/src/calendar/CalendarDay.tsx @@ -21,7 +21,7 @@ export default defineComponent({ rowHeight: String, }, - emits: ['click'], + emits: ['click', 'clickDisabledDate'], setup(props, { emit, slots }) { const style = computed(() => { @@ -64,6 +64,8 @@ export default defineComponent({ const onClick = () => { if (props.item.type !== 'disabled') { emit('click', props.item); + } else { + emit('clickDisabledDate', props.item); } }; diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx index 3a4d9af32..332ec37dc 100644 --- a/packages/vant/src/calendar/CalendarMonth.tsx +++ b/packages/vant/src/calendar/CalendarMonth.tsx @@ -62,7 +62,7 @@ export default defineComponent({ props: calendarMonthProps, - emits: ['click'], + emits: ['click', 'clickDisabledDate'], setup(props, { emit, slots }) { const [visible, setVisible] = useToggle(); @@ -262,6 +262,7 @@ export default defineComponent({ offset={offset.value} rowHeight={rowHeight.value} onClick={(item) => emit('click', item)} + onClickDisabledDate={(item) => emit('clickDisabledDate', item)} /> ); diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index 07fbd194d..5b398f7bc 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -328,6 +328,7 @@ Following props are supported when the type is multiple | month-show | Emitted when a month enters the visible area | _value: { date: Date, title: string }_ | | over-range | Emitted when exceeded max range | - | | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ | +| click-disabled-date | Emitted when clicking disabled date | _value: Date \| Date[]_ | ### Slots diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index 8558e9429..a9df6acf2 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -334,6 +334,7 @@ export default { | month-show | 当某个月份进入可视区域时触发 | _{ date: Date, title: string }_ | | over-range | 范围选择超过最多可选天数时触发 | - | | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ | +| click-disabled-date | 点击禁用日期时触发 | _value: Date \| Date[]_ | ### Slots diff --git a/packages/vant/src/calendar/test/index.spec.ts b/packages/vant/src/calendar/test/index.spec.ts index b215fce15..f566beed5 100644 --- a/packages/vant/src/calendar/test/index.spec.ts +++ b/packages/vant/src/calendar/test/index.spec.ts @@ -187,6 +187,26 @@ test('should not trigger select event when click disabled day', async () => { expect(wrapper.emitted('select')).toBeFalsy(); }); +test('should trigger click-disabled-date event when click disabled day', async () => { + const fn = vi.fn(); + const wrapper = mount(Calendar, { + props: { + minDate, + maxDate, + poppable: false, + lazyRender: false, + onClickDisabledDate: fn, + }, + }); + + await later(); + + const disabeldDate = wrapper.findAll('.van-calendar__day--disabled')[0]; + expect(disabeldDate).toBeDefined(); + await disabeldDate.trigger('click'); + expect(fn).toHaveBeenCalled(); +}); + test('confirm event when type is single', async () => { const wrapper = mount(Calendar, { props: {