DatePicker 日期选择器
规则
基础示例（日期时间范围）
Props 配置示例
日期选择（date）
日期时间选择（enableTimePicker）
日期范围选择
日期时间范围选择
月份选择（month）
整段禁用
尺寸对比（小 / 中 / 大）
Events 事件示例
监听日期变化
日期选择后联动更新
完整配置项:TDesign_DatePicker
DatePicker
type：datePicker
value：单选为 string（配合 valueType）；多选为 Array。未选时可用 '' 或 []。
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowInput | 是否允许输入日期 | boolean | false | - |
| borderless | 无边框模式 | boolean | false | - |
| cell | 自定义日期单元格 | TNode<{ value: DateValue }> | - | - |
| clearable | 是否显示清除按钮 | boolean | false | - |
| defaultTime | 时间选择器默认值 | string | 00:00:00 | - |
| disableDate | 禁用日期 | DisableDate | - | - |
| disableTime | 禁用时间项（日期时间选择器） | (time: Date) => Partial<{ hour; minute; second; millisecond }> | - | - |
| disabled | 是否禁用 | boolean | - | - |
| enableTimePicker | 是否显示时间选择 | boolean | false | - |
| firstDayOfWeek | 每周第一天 | 1–7 | 7 | - |
| format | 日期显示格式（不影响 value） | string | YYYY-MM-DD | - |
| inputProps | 透传 Input 属性 | InputProps | - | - |
| label | 左侧文本 | string | TNode | - | - |
| mode | 选择器模式 | year | quarter | month | week | date | date | - |
| multiple | 多选日期 | boolean | false | - |
| needConfirm | 日期时间场景是否需要确认 | boolean | true | - |
| panelActiveDate | 年月下拉选中值 | PanelActiveDate | - | - |
| placeholder | 占位符 | string | Array<string> | - | - |
| popupProps | 透传 Popup 属性 | PopupProps | - | - |
| prefixIcon | 前置图标 | TNode | - | - |
| presets | 预设快捷日期 | PresetDate | TNode | - | - |
| presetsPlacement | 预设面板位置 | left | top | right | bottom | bottom | - |
| range | 日期可选范围 | PickerDateRange | - | - |
| readonly | 只读（优先级高于 allowInput） | boolean | - | - |
| selectInputProps | 透传 SelectInput 属性 | SelectInputProps | - | - |
| size | 尺寸 | small | medium | large | medium | - |
| status | 状态 | default | success | warning | error | default | - |
| suffixIcon | 后置图标 | TNode | - | - |
| timePickerProps | 透传 TimePicker 属性 | TimePickerProps | - | - |
| tips | 下方提示文本 | string | TNode | - | - |
| value | 选中值 | DateValue | DateMultipleValue | '' | - |
| defaultValue | 非受控选中值 | DateValue | DateMultipleValue | '' | - |
| valueDisplay | 自定义选中项呈现 | string | TNode<{ value; displayValue? }> | - | - |
| valueType | 日期值格式 | DatePickerValueType | - | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| blur | 失去焦点 | (context: { value; e: FocusEvent }) => void | - |
| change | 选中值变化 | (value, context: { dayjsValue?: Dayjs; trigger?: DatePickerTriggerSource }) => void | - |
| clear | 清空 | (context: { e: MouseEvent }) => void | - |
| confirm | 点击确定 | (context: { date: Date; e: MouseEvent }) => void | - |
| focus | 获得焦点 | (context: { value; e: FocusEvent }) => void | - |
| monthChange | 月份切换 | (context: { month; date; e?; trigger }) => void | - |
| pick | 面板选中值 | (value: DateValue) => void | - |
| presetClick | 点击预设 | (context: { preset; e: MouseEvent }) => void | - |
| yearChange | 年份切换 | (context: { year; date; trigger; e? }) => void | - |
DateRangePicker
type：dateRangePicker
value：string[]（配合 valueType）
Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| allowInput | 是否允许输入 | boolean | false | - |
| borderless | 无边框模式 | boolean | false | - |
| cancelRangeSelectLimit | 取消开始/结束日期顺序限制 | boolean | false | - |
| cell | 自定义日期单元格 | TNode<{ value: DateValue }> | - | - |
| clearable | 清除按钮 | boolean | false | - |
| defaultTime | 时间默认值 | string[] | ['00:00:00','23:59:59'] | - |
| disableDate | 禁用日期 | DisableRangeDate | - | - |
| disableTime | 禁用时间项 | (times, context: { partial }) => Partial<{ hour; minute; second }> | - | - |
| disabled | 是否禁用 | boolean | Array<boolean> | - | - |
| enableTimePicker | 是否显示时间选择 | boolean | TimePanelConfig | false | - |
| firstDayOfWeek | 每周第一天 | 1–7 | - | - |
| format | 日期格式 | string | - | - |
| label | 左侧文本 | string | TNode | - | - |
| mode | 选择器模式 | year | quarter | month | week | date | date | - |
| needConfirm | 是否需要确认 | boolean | true | - |
| panelActiveDate | 年月下拉选中值 | PanelActiveDate | [PanelActiveDate, PanelActiveDate] | - | - |
| panelPreselection | 开始日期选中前面板是否预选 | boolean | true | - |
| placeholder | 占位符 | string | Array<string> | - | - |
| popupProps | 透传 Popup | PopupProps | - | - |
| prefixIcon | 前置图标 | TNode | - | - |
| presets | 预设快捷范围 | PresetRange | TNode | - | - |
| presetsPlacement | 预设面板位置 | left | top | right | bottom | bottom | - |
| range | 可选日期范围 | PickerDateRange | PickerDateRange[] | - | - |
| rangeInputProps | 透传 RangeInput | RangeInputProps | - | - |
| readonly | 只读 | boolean | - | - |
| separator | 日期分隔符 | string | - | - |
| size | 尺寸 | small | medium | large | medium | - |
| status | 状态 | default | success | warning | error | default | - |
| suffixIcon | 后置图标 | TNode | - | - |
| timePickerProps | 透传 TimePicker | TimePickerProps | - | - |
| tips | 下方提示 | string | TNode | - | - |
| value | 选中范围 | DateRangeValue | [] | - |
| defaultValue | 非受控范围 | DateRangeValue | [] | - |
| valueType | 日期值格式 | DatePickerValueType | - | - |
Events
| 事件 | 说明 | 类型 | 版本 |
|---|---|---|---|
| blur | 失去焦点 | (context: { value; partial; e: FocusEvent }) => void | - |
| change | 选中值变化 | (value: DateRangeValue, context: { dayjsValue?: Dayjs[]; trigger? }) => void | - |
| confirm | 点击确定 | (context: { date: Date[]; e: MouseEvent; partial }) => void | - |
| focus | 获得焦点 | (context: { value; partial; e: FocusEvent }) => void | - |
| input | 输入变化 | (context: { input; value; partial; e: InputEvent }) => void | - |
| monthChange | 月份切换 | (context: { month; date; partial; e?; trigger }) => void | - |
| pick | 选中日期 | (value: DateValue, context: { e: MouseEvent; partial }) => void | - |
| presetClick | 点击预设 | (context: { preset; e: MouseEvent }) => void | - |
| yearChange | 年份切换 | (context: { year; date; partial; trigger; e? }) => void | - |