diff --git a/src/components/calendar/calendar.en.md b/src/components/calendar/calendar.en.md index 118e00f38b..a2684247a3 100644 --- a/src/components/calendar/calendar.en.md +++ b/src/components/calendar/calendar.en.md @@ -17,6 +17,7 @@ | onPageChange | Trigger when changed year or month. | `(year: number, month: number) => void` | - | | weekStartsOn | Week starts on which day. | `'Monday' \| 'Sunday'` | `'Sunday'` | | renderLabel | The label render function. | `(date: Date) => string \| null \| undefined` | - | +| allowClear | Whether to allow clearing after another click. | `boolean` | `true` | ### CSS Variables diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index 204e8a99cb..63ff6df5da 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -28,9 +28,10 @@ export type CalenderRef = { } export type CalendarProps = { + onPageChange?: (year: number, month: number) => void weekStartsOn?: 'Monday' | 'Sunday' renderLabel?: (date: Date) => string | null | undefined - onPageChange?: (year: number, month: number) => void + allowClear?: boolean } & ( | { selectionMode?: undefined @@ -56,6 +57,7 @@ export type CalendarProps = { const defaultProps = { weekStartsOn: 'Sunday', defaultValue: null, + allowClear: true, } export const Calendar = forwardRef((p, ref) => { @@ -194,7 +196,20 @@ export const Calendar = forwardRef((p, ref) => { onClick={() => { if (!props.selectionMode) return const date = d.toDate() + if (!inThisMonth) { + setCurrent(d.clone().date(1)) + } + function shouldClear() { + if (!props.allowClear) return false + if (!dateRange) return false + const [begin, end] = dateRange + return d.isSame(begin, 'date') && d.isSame(end, 'day') + } if (props.selectionMode === 'single') { + if (props.allowClear && shouldClear()) { + setDateRange(null) + return + } setDateRange([date, date]) } else if (props.selectionMode === 'range') { if (!dateRange) { @@ -202,8 +217,7 @@ export const Calendar = forwardRef((p, ref) => { setIntermediate(true) return } - const [begin, end] = dateRange - if (d.isSame(begin, 'date') && d.isSame(end, 'day')) { + if (shouldClear()) { setDateRange(null) setIntermediate(false) return @@ -217,9 +231,6 @@ export const Calendar = forwardRef((p, ref) => { setIntermediate(true) } } - if (!inThisMonth) { - setCurrent(d.clone().date(1)) - } }} >
{d.date()}
diff --git a/src/components/calendar/calendar.zh.md b/src/components/calendar/calendar.zh.md index 8b8c3cc41d..67300d2dd9 100644 --- a/src/components/calendar/calendar.zh.md +++ b/src/components/calendar/calendar.zh.md @@ -15,6 +15,7 @@ | onPageChange | 切换月或年时触发 | `(year: number, month: number) => void` | - | | weekStartsOn | 每周以周几作为第一天 | `'Monday' \| 'Sunday'` | `'Sunday'` | | renderLabel | 标注信息的渲染函数 | `(date: Date) => string \| null \| undefined` | - | +| allowClear | 是否允许再次点击后清除 | `boolean` | `true` | ### CSS 变量