feat(DatePicker): add onClear disableTime range and panelActiveDate API#6316
Merged
feat(DatePicker): add onClear disableTime range and panelActiveDate API#6316
onClear disableTime range and panelActiveDate API#6316Conversation
Collaborator
TDesign Component Site Preview Open
|
commit: |
Wesley-0808
changed the title
onClear disableTime range API
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request adds three new API features to the DatePicker component to align with other TDesign framework implementations (tdesign-react, tdesign-vue):
Changes:
- Added
onClearevent callback that triggers when the clear button is clicked - Added
disableTimeAPI to configure disabled time items in date-time picker mode - Added
rangeAPI to define selectable date ranges with array or function-based configuration - Added
panelActiveDateAPI to control the active year/month in the date picker panel - Added
onPanelActiveDateevent to track year/month dropdown selection changes
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/date-picker/type.ts | Added type definitions for new APIs: disableTime, range, panelActiveDate, onClear, onPanelActiveDate, and supporting types |
| packages/components/date-picker/props.ts | Added prop definitions for the new DatePicker APIs |
| packages/components/date-picker/date-range-picker-props.ts | Added prop definitions for DateRangePicker including range and panelActiveDate |
| packages/components/date-picker/hooks/useTableData.tsx | Implemented range logic to compute disabled dates based on range restrictions |
| packages/components/date-picker/hooks/useSelectRange.ts | New utility module providing range validation and pagination control functions |
| packages/components/date-picker/hooks/index.ts | Exported new useSelectRange hook |
| packages/components/date-picker/components/panel/SinglePanel.tsx | Pass range and disableTime props to panel components |
| packages/components/date-picker/components/panel/PanelContent.tsx | Handle disableTime for both single and range pickers |
| packages/components/date-picker/components/base/Header.tsx | Integrate range restrictions into year/month selection UI |
| packages/components/date-picker/DatePicker.tsx | Implement onClear event callback |
| packages/components/date-picker/date-picker.md | Documentation updates for new APIs (Chinese) |
| packages/components/date-picker/date-picker.en-US.md | Documentation updates for new APIs (English) |
| packages/components/date-picker/_example/range.vue | Example demonstrating new range and panelActiveDate APIs |
| packages/components/date-picker/_example/range-status.vue | Example demonstrating range validation in different picker modes |
Comments suppressed due to low confidence (1)
packages/components/date-picker/type.ts:448
- The
onClearevent was added toTdDatePickerPropsbut not toTdDateRangePickerProps. Since both components have aclearableprop that allows users to clear the selected date, it would be more consistent to also add theonClearevent toTdDateRangePickerProps. This would allow developers to handle clear actions uniformly across both picker types.
export interface TdDateRangePickerProps {
/**
* 是否允许输入日期
* @default false
*/
allowInput?: boolean;
/**
* 无边框模式
* @default false
*/
borderless?: boolean;
/**
* 默认的日期选择交互是根据点击前后日期的顺序来决定并且会加以限制。比如：用户先点击开始时间输入框，选择了一个日期例如2020-05-15，紧接着交互会自动将焦点跳到结束日期输入框，等待用户选择结束时间。此时用户只能选择大于2020-05-15的日期（之前的日期会被灰态禁止点击，限制用户的点击）。当该值传递`true`时，则取消该限制
* @default false
*/
cancelRangeSelectLimit?: boolean;
/**
* 是否显示清除按钮
* @default false
*/
clearable?: boolean;
/**
* 时间选择器默认值，当 value/defaultValue 未设置值时有效
* @default ["00:00:00", "23:59:59"]
*/
defaultTime?: string[];
/**
* 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用
*/
disableDate?: DisableRangeDate;
/**
* 禁用时间项的配置函数，仅在日期区间选择器中开启时间展示时可用
*/
disableTime?: (
times: Array<Date | null>,
context: { partial: DateRangePickerPartial },
) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number> }>;
/**
* 是否禁用组件
*/
disabled?: boolean;
/**
* 是否显示时间选择
* @default false
*/
enableTimePicker?: boolean;
/**
* 第一天从星期几开始
*/
firstDayOfWeek?: number;
/**
* 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)
* @default ''
*/
format?: string;
/**
* 左侧文本
*/
label?: string | TNode;
/**
* 选择器模式
* @default date
*/
mode?: 'year' | 'quarter' | 'month' | 'week' | 'date';
/**
* 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true`
* @default true
*/
needConfirm?: boolean;
/**
* 日期选择器中年月下拉框的选中值
*/
panelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
/**
* 日期选择器中年月下拉框的选中值，非受控属性
*/
defaultPanelActiveDate?: PanelActiveDate | [PanelActiveDate, PanelActiveDate];
/**
* 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期
* @default true
*/
panelPreselection?: boolean;
/**
* 占位符，值为数组表示可分别为开始日期和结束日期设置占位符
*/
placeholder?: string | Array<string>;
/**
* 透传 Popup 组件全部属性
*/
popupProps?: PopupProps;
/**
* 组件前置图标
*/
prefixIcon?: TNode;
/**
* 预设快捷日期选择，示例：{ '特定日期范围': ['2021-01-01', '2022-01-01'], '本月': [dayjs().startOf('month'), dayjs().endOf('month')] }
*/
presets?: PresetRange;
/**
* 预设面板展示区域（包含确定按钮）
* @default bottom
*/
presetsPlacement?: 'left' | 'top' | 'right' | 'bottom';
/**
* 日期可选择范围。值为数组则第一项是开始面板的可选范围，第二项是结束面板的可选范围。示例：['2025-01-01', '2025-12-31'] 表示'2025-01-01'至'2025-12-31'为可选日期。值为`null`表示不限制，例如['2025-01-01', null]表示可选日期从'2025-01-01'开始，不限制结束。值类型为 Function 则表示返回值为 true 的日期为可选。 与`disableDate`共用时，`disableDate`优先级更高。
*/
range?: PickerDateRange | PickerDateRange[];
/**
* 透传给范围输入框 RangeInput 组件的参数
*/
rangeInputProps?: RangeInputProps;
/**
* 是否只读，优先级大于 `allowInput`
*/
readonly?: boolean;
/**
* 日期分隔符，支持全局配置，默认为 '-'
* @default ''
*/
separator?: string;
/**
* 输入框尺寸
* @default medium
*/
size?: SizeEnum;
/**
* 输入框状态
* @default default
*/
status?: 'default' | 'success' | 'warning' | 'error';
/**
* 组件后置图标
*/
suffixIcon?: TNode;
/**
* 透传 TimePicker 组件属性
*/
timePickerProps?: TimePickerProps;
/**
* 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
*/
tips?: string | TNode;
/**
* 选中值
* @default []
*/
value?: DateRangeValue;
/**
* 选中值，非受控属性
* @default []
*/
defaultValue?: DateRangeValue;
/**
* 选中值
* @default []
*/
modelValue?: DateRangeValue;
/**
* 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式
*/
valueType?:
| 'time-stamp'
| 'Date'
| 'YYYY'
| 'YYYY-MM'
| 'YYYY-MM-DD'
| 'YYYY-MM-DD HH'
| 'YYYY-MM-DD HH:mm'
| 'YYYY-MM-DD HH:mm:ss'
| 'YYYY-MM-DD HH:mm:ss:SSS';
/**
* 当输入框失去焦点时触发
*/
onBlur?: (context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void;
/**
* 选中值发生变化时触发
*/
onChange?: (value: DateRangeValue, context: { dayjsValue?: Dayjs[]; trigger?: DatePickerTriggerSource }) => void;
/**
* 如果存在“确定”按钮，则点击“确定”按钮时触发
*/
onConfirm?: (context: { date: Date[]; e: MouseEvent; partial: DateRangePickerPartial }) => void;
/**
* 输入框获得焦点时触发
*/
onFocus?: (context: { value: DateRangeValue; partial: DateRangePickerPartial; e: FocusEvent }) => void;
/**
* 输入框数据发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值
*/
onInput?: (context: { input: string; value: DateRangeValue; partial: DateRangePickerPartial; e: InputEvent }) => void;
/**
* 月份切换发生变化时触发
*/
onMonthChange?: (context: {
month: number;
date: Date[];
partial: DateRangePickerPartial;
e?: MouseEvent;
trigger: DatePickerMonthChangeTrigger;
}) => void;
/**
* 年月下拉框选中值变化时触发
*/
onPanelActiveDate?: (
value: number | Date,
context: { partial: DateRangePickerPartial; trigger: DatePickerPanelActiveDate; e?: MouseEvent },
) => void;
/**
* 选中日期时触发，可能是开始日期，也可能是结束日期，第二个参数可以区分是开始日期或是结束日期
*/
onPick?: (value: DateValue, context: PickContext) => void;
/**
* 点击预设按钮后触发
*/
onPresetClick?: (context: { preset: PresetDate; e: MouseEvent }) => void;
/**
* 年份切换发生变化时触发
*/
onYearChange?: (context: {
year: number;
date: Date[];
partial: DateRangePickerPartial;
trigger: DatePickerYearChangeTrigger;
e?: MouseEvent;
}) => void;
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
uyarn
requested review from
Cat1007,
PengYYYYY,
chaishi,
liweijie0812,
uyarn,
zhangpaopao0609 and
zydemail
as code owners
…sley/feat/datepicker-range
…sley/feat/datepicker-range
16 tasks
uyarn
changed the title
onClear disableTime range APIonClear disableTime range and panelActiveDate API
Collaborator
Author
|
/update-common |
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 20 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
uyarn
approved these changes
Feb 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
onClear和disableTime，实际未实现，对齐实现📝 更新日志
tdesign-vue-next
onClear清空按钮点击时触发事件presets支持自定义渲染，用于配置精确时分秒等预设场景disableTimeAPI，用于配置时间选择器中被禁用的时间range和panelActiveDateAPI，用于支持定义日期选择范围，具体使用请参考示例range和panelActiveDateAPI，用于支持定义日期选择范围，具体使用请参考示例@tdesign-vue-next/chat
@tdesign-vue-next/auto-import-resolver
☑️ 请求合并前的自查清单