diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 2a6d226ad..7cfd03196 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -1,6 +1,6 @@ import Select from '../select'; import { Group, Button } from '../radio'; -import type { CalendarMode } from './generateCalendar'; +import type { CalendarMode, SelectInfo } from './generateCalendar'; import type { Ref } from 'vue'; import { defineComponent, ref } from 'vue'; import type { Locale } from '../vc-picker/interface'; @@ -150,7 +150,7 @@ export interface CalendarHeaderProps { locale: Locale; mode: CalendarMode; fullscreen: boolean; - onChange: (date: DateType) => void; + onChange: (date: DateType, source: SelectInfo['source']) => void; onModeChange: (mode: CalendarMode) => void; } @@ -177,15 +177,26 @@ export default defineComponent>({ const { prefixCls, fullscreen, mode, onChange, onModeChange } = props; const sharedProps = { ...props, - onChange, fullscreen, divRef, } as any; return (
- - {mode === 'month' && } + { + onChange(v, 'year'); + }} + /> + {mode === 'month' && ( + { + onChange(v, 'month'); + }} + /> + )}
); diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index 43d815cac..86f387eeb 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -27,6 +27,10 @@ type InjectDefaultProps = Omit< size?: 'large' | 'default' | 'small'; }; +export interface SelectInfo { + source: 'year' | 'month' | 'date' | 'customize'; +} + // Picker Props export type PickerPanelBaseProps = InjectDefaultProps>; export type PickerPanelDateProps = InjectDefaultProps>; @@ -64,7 +68,7 @@ export interface CalendarProps { onChange?: (date: DateType | string) => void; 'onUpdate:value'?: (date: DateType | string) => void; onPanelChange?: (date: DateType | string, mode: CalendarMode) => void; - onSelect?: (date: DateType | string) => void; + onSelect?: (date: DateType, selectInfo: SelectInfo) => void; valueFormat?: string; } @@ -217,9 +221,9 @@ function generateCalendar< triggerPanelChange(mergedValue.value, newMode); }; - const onInternalSelect = (date: DateType) => { + const onInternalSelect = (date: DateType, source: SelectInfo['source']) => { triggerChange(date); - emit('select', maybeToString(date)); + emit('select', maybeToString(date), { source }); }; // ====================== Locale ====================== const defaultLocale = computed(() => { @@ -317,7 +321,9 @@ function generateCalendar< headerRender({ value: mergedValue.value, type: mergedMode.value, - onChange: onInternalSelect, + onChange: nextDate => { + onInternalSelect(nextDate, 'customize'); + }, onTypeChange: triggerModeChange, }) ) : ( @@ -340,7 +346,9 @@ function generateCalendar< generateConfig={generateConfig} dateRender={dateRender} monthCellRender={obj => monthRender(obj, mergedLocale.value.lang)} - onSelect={onInternalSelect} + onSelect={nextDate => { + onInternalSelect(nextDate, panelMode.value); + }} mode={panelMode.value} picker={panelMode.value} disabledDate={mergedDisabledDate.value} diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index c7eb47349..ae9e8b744 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -46,4 +46,21 @@ customize the progress dot by setting a scoped slot | --- | --- | --- | --- | --- | | change | Callback for when value change | function(date: dayjs \| string) | - | | | panelChange | Callback for when panel changes | function(date: dayjs \| string, mode: string) | - | | -| select | Callback for when a date is selected | function(date: dayjs \| string) | - | | +| select | Callback for when a date is selected, include source info | function(date: dayjs \| string,info:{ source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | | + +### How to get date from panel click? + +`select` event provide `info.source` to help on this: + +```html + + +``` diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index f98e9eeba..b96f0caf0 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -42,7 +42,24 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA ### 事件 | 事件名称 | 说明 | 回调参数 | | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string) | 无 | | panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 | -| select | 点击选择日期回调 | function(date: dayjs \| string) | 无 | +| select | 选择日期回调,包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | | + +### 如何仅获取来自面板点击的日期? + +`select` 事件提供额外的来源信息,你可以通过 `info.source` 来判断来源: + +```html + + +```