使用import { DatePicker } from 'antd'; |
文档贡献者
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
通用属性参考：通用属性
日期类组件包括以下五种形式。
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：ConfigProvider 国际化。
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：默认配置。
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）import locale from 'antd/locale/zh_CN';import dayjs from 'dayjs';import 'dayjs/locale/zh-cn';dayjs.locale('zh-cn');<ConfigProvider locale={locale}><DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} /></ConfigProvider>;
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 'use client'。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
以下 API 为 DatePicker、 RangePicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| allowClear | 自定义清除按钮 | boolean | { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 | DatePicker: 6.4.0，RangePicker: × |
是否带边框，请使用 variant 替代 | boolean | true | - | × | |
| className | 选择器 className | string | - | DatePicker: 5.7.0，RangePicker: 5.11.0 | |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | DatePicker: 6.0.0，RangePicker: × | |
| dateRender | 自定义日期单元格的内容，5.4.0 起用 cellRender 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | × |
| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 | × |
| components | 自定义面板 | Record<Panel | 'input', React.ComponentType> | - | 5.14.0 | × |
| defaultOpen | 是否默认展开控制弹层 | boolean | - | × | |
| disabled | 禁用 | boolean | false | × | |
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info: 5.14.0 | × |
弹出日历的 className，请使用 classNames.popup.root 替代 | string | - | - | × | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs#format。示例：自定义格式 | formatType | @rc-component/picker | × | |
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 | × |
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 | × |
额外的弹出日历 className，使用 classNames.popup.root 替代 | string | - | 4.23.0 | × | |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | × | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | × | |
| locale | 国际化配置 | object | 默认配置 | × | |
| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 | × |
| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 | × |
| mode | 日期面板的状态（设置后无法选择年份/月份？） | time | date | month | year | decade | - | × | |
| needConfirm | 是否需要确认按钮，为 false 时失去焦点即代表选择。当设置 multiple 时默认为 false | boolean | - | 5.14.0 | × |
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 | × |
| open | 控制弹层是否展开 | boolean | - | × | |
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 | × |
| picker | 设置选择器类型 | date | week | month | quarter | year | date | quarter: 4.1.0 | × |
| placeholder | 输入框提示文字 | string | [string, string] | - | × | |
| placement | 选择框弹出的位置 | bottomLeft bottomRight topLeft topRight | bottomLeft | × | |
额外的弹出日历样式，使用 styles.popup.root 替代 | CSSProperties | {} | × | ||
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 | × |
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 | × |
| previewValue | 当用户选择日期悬停选项时，输入字段的值会发生临时更改 | false | hover | hover | 6.0.0 | × |
| presets | 预设时间范围快捷选择, 自 5.8.0 起 value 支持函数返回值 | { label: React.ReactNode, value: Dayjs | (() => Dayjs) }[] | - | × | |
| size | 输入框大小，large 高度为 40px，small 为 24px，默认是 32px | large | medium | small | - | × | |
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 | × |
| style | 自定义输入框样式 | CSSProperties | {} | DatePicker: 5.7.0，RangePicker: 5.11.0 | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | DatePicker: 6.0.0，RangePicker: × | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | DatePicker: 6.3.0，RangePicker: × | |
| superNextIcon | 自定义 >> 切换图标 | ReactNode | - | 4.17.0 | × |
| superPrevIcon | 自定义 << 切换图标 | ReactNode | - | 4.17.0 | × |
| clearIcon | （仅支持全局配置）自定义清除图标 | ReactNode | - | × | DatePicker: 6.4.0，RangePicker: × |
| variant | 形态变体 | outlined | borderless | filled | underlined | outlined | 5.13.0 | underlined: 5.24.0 | DatePicker: 5.13.0，RangePicker: 5.13.0 |
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | × | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | × | |
选中日期时的回调，请使用 onCalendarChange 替代 | function(value) | - | - | × |
| 名称 | 描述 | 版本 |
|---|---|---|
| blur() | 移除焦点 | |
| focus() | 获取焦点 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | dayjs | - | 5.14.0 |
| defaultValue | 默认日期，如果开始时间或结束时间为 null 或者 undefined，日期范围将是一个开区间 | dayjs | - | |
| disabledTime | 不可选择的时间 | function(date) | - | |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY-MM-DD | |
| multiple | 是否为多选，不支持 showTime | boolean | false | 5.14.0 |
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 onPanelChange 使用。 | dayjs | - | 5.14.0 |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
| showTime | 增加时间选择功能 | Object | boolean | TimePicker Options | |
请使用 showTime.defaultOpenValue | dayjs | dayjs() | 5.27.3 | |
| showTime.defaultOpenValue | 设置用户选择日期时默认的时分秒，例子 | dayjs | dayjs() | |
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
| value | 日期 | dayjs | - | |
| onChange | 时间发生变化的回调 | function(date: dayjs | null, dateString: string | null) | - | |
| onOk | 点击确定按钮的回调 | function() | - | |
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultValue | 默认日期 | dayjs | - | |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY | |
| multiple | 是否为多选 | boolean | false | 5.14.0 |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| tagRender | 自定义 tag 内容 render，仅在 multiple 模式下生效 | (props) => ReactNode | - | 6.4.0 |
| value | 日期 | dayjs | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs | null, dateString: string | null) | - |
4.1.0 新增。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultValue | 默认日期 | dayjs | - | |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY-\QQ | |
| multiple | 是否为多选 | boolean | false | 5.14.0 |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| tagRender | 自定义 tag 内容 render，仅在 multiple 模式下生效 | (props) => ReactNode | - | 6.4.0 |
| value | 日期 | dayjs | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs | null, dateString: string | null) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultValue | 默认日期 | dayjs | - | |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY-MM | |
| multiple | 是否为多选 | boolean | false | 5.14.0 |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| tagRender | 自定义 tag 内容 render，仅在 multiple 模式下生效 | (props) => ReactNode | - | 6.4.0 |
| value | 日期 | dayjs | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs | null, dateString: string | null) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| defaultValue | 默认日期 | dayjs | - | |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY-wo | |
| multiple | 是否为多选 | boolean | false | 5.14.0 |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| tagRender | 自定义 tag 内容 render，仅在 multiple 模式下生效 | (props) => ReactNode | - | 6.4.0 |
| value | 日期 | dayjs | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs | null, dateString: string | null) | - | |
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | 全局配置 |
|---|---|---|---|---|---|
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | × | |
| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 | × |
| dateRender | 自定义日期单元格的内容，5.4.0 起用 cellRender 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | × |
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | dayjs[] | - | 5.14.0 | × |
| defaultValue | 默认日期 | dayjs[] | - | × | |
| disabled | 禁用起始项 | [boolean, boolean] | - | × | |
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: start | end, info: { from?: dayjs }) | - | info.from: 5.17.0 | × |
| format | 展示的日期格式，配置参考 dayjs#format。 | formatType | YYYY-MM-DD HH:mm:ss | × | |
| id | 设置输入框 id 属性。 | { start?: string, end?: string } | - | 5.14.0 | × |
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 onPanelChange 使用。 | dayjs[] | - | 5.14.0 | × |
| presets | 预设时间范围快捷选择，自 5.8.0 起 value 支持函数返回值 | { label: React.ReactNode, value: (Dayjs | (() => Dayjs))[] }[] | - | × | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | × | |
| separator | 设置分隔符 | React.ReactNode | <SwapRightOutlined /> | 6.3.0 | |
| showTime | 增加时间选择功能 | Object|boolean | TimePicker Options | × | |
请使用 showTime.defaultOpenValue | dayjs[] | [dayjs(), dayjs()] | 5.27.3 | × | |
| showTime.defaultOpenValue | 设置用户选择日期时默认的时分秒，例子 | dayjs[] | [dayjs(), dayjs()] | × | |
| value | 日期 | dayjs[] | - | × | |
| onCalendarChange | 待选日期发生变化的回调。info 参数自 4.4.0 添加 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range:start|end }) | - | × | |
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs] | null, dateStrings: [string, string] | null) | - | × | |
| onFocus | 聚焦时回调 | function(event, { range: 'start' | 'end' }) | - | range: 5.14.0 | × |
| onBlur | 失焦时回调 | function(event, { range: 'start' | 'end' }) | - | range: 5.14.0 | × |
import type { Dayjs } from 'dayjs';type Generic = string;type GenericFn = (value: Dayjs) => string;export type FormatType =| Generic| GenericFn| Array<Generic | GenericFn>| {format: string;type?: 'mask';};
注意：type 定义为 5.14.0 新增。
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| activeBg | 输入框激活状态时背景颜色 | string | #ffffff |
| activeBorderColor | 激活态边框色 | string | #1677ff |
| activeShadow | 激活态阴影 | string | 0 0 0 2px rgba(5,145,255,0.1) |
| addonBg | 前/后置标签背景色 | string | rgba(0,0,0,0.02) |
| cellActiveWithRangeBg | 选取范围内的单元格背景色 | string | #e6f4ff |
| cellBgDisabled | 单元格禁用态背景色 | string | rgba(0,0,0,0.04) |
| cellHeight | 单元格高度 | number | 24 |
| cellHoverBg | 单元格悬浮态背景色 | string | rgba(0,0,0,0.04) |
| cellHoverWithRangeBg | 选取范围内的单元格悬浮态背景色 | string | #cbe0fd |
| cellRangeBorderColor | 选取范围时单元格边框色 | string | #82b4f9 |
| cellWidth | 单元格宽度 | number | 36 |
| errorActiveShadow | 错误状态时激活态阴影 | string | 0 0 0 2px rgba(255,38,5,0.06) |
| hoverBg | 输入框hover状态时背景颜色 | string | #ffffff |
| hoverBorderColor | 悬浮态边框色 | string | #4096ff |
| inputFontSize | 字体大小 | number | 14 |
| inputFontSizeLG | 大号字体大小 | number | 16 |
| inputFontSizeSM | 小号字体大小 | number | 14 |
| multipleItemBg | 多选标签背景色 | string | rgba(0,0,0,0.06) |
| multipleItemBorderColor | 多选标签边框色 | string | transparent |
| multipleItemBorderColorDisabled | 多选标签禁用边框色 | string | transparent |
| multipleItemColorDisabled | 多选标签禁用文本颜色 | string | rgba(0,0,0,0.25) |
| multipleItemHeight | 多选标签高度 | number | 24 |
| multipleItemHeightLG | 大号多选标签高度 | number | 32 |
| multipleItemHeightSM | 小号多选标签高度 | number | 16 |
| multipleSelectorBgDisabled | 多选框禁用背景 | string | rgba(0,0,0,0.04) |
| paddingBlock | 输入框纵向内边距 | number | 4 |
| paddingBlockLG | 大号输入框纵向内边距 | number | 7 |
| paddingBlockSM | 小号输入框纵向内边距 | number | 0 |
| paddingInline | 输入框横向内边距 | number | 11 |
| paddingInlineLG | 大号输入框横向内边距 | number | 11 |
| paddingInlineSM | 小号输入框横向内边距 | number | 7 |
| presetsMaxWidth | 预设区域最大宽度 | number | 200 |
| presetsWidth | 预设区域宽度 | number | 120 |
| textHeight | 单元格文本高度 | number | 40 |
| timeCellHeight | 时间单元格高度 | number | 28 |
| timeColumnHeight | 时间列高度 | number | 224 |
| timeColumnWidth | 时间列宽度 | number | 56 |
| warningActiveShadow | 警告状态时激活态阴影 | string | 0 0 0 2px rgba(255,215,5,0.1) |
| withoutTimeCellHeight | 十年/年/季/月/周单元格高度 | number | 66 |
| zIndexPopup | 弹窗 z-index | number | 1050 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorBgContainer | 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。 | string | #ffffff |
| colorBgContainerDisabled | 控制容器在禁用状态下的背景色。 | string | rgba(0,0,0,0.04) |
| colorBgElevated | 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。 | string | #ffffff |
| colorBorder | 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。 | string | #d9d9d9 |
| colorBorderDisabled | 控制元素在禁用状态下的边框颜色。 | string | #d9d9d9 |
| colorError | 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。 | string | #ff4d4f |
| colorErrorAffix | 控制表单控件前后缀在错误状态下的颜色。 | string | #ff4d4f |
| colorErrorBg | 错误色的浅色背景颜色 | string | #fff2f0 |
| colorErrorBgHover | 错误色的浅色背景色悬浮态 | string | #fff1f0 |
| colorErrorBorderHover | 错误色的描边色悬浮态 | string | #ffa39e |
| colorErrorText | 错误色的文本默认态 | string | #ff4d4f |
| colorFillSecondary | 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。 | string | rgba(0,0,0,0.06) |
| colorFillTertiary | 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。 | string | rgba(0,0,0,0.04) |
| colorIcon | 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。 * | string | rgba(0,0,0,0.45) |
| colorIconHover | 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。 | string | rgba(0,0,0,0.88) |
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorPrimaryBorder | 主色梯度下的描边用色，用在 Slider 等组件的描边上。 | string | #91caff |
| colorSplit | 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。 | string | rgba(5,5,5,0.06) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| colorTextDisabled | 控制禁用状态下的字体颜色。 | string | rgba(0,0,0,0.25) |
| colorTextHeading | 控制标题字体颜色。 | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。 | string | #fff |
| colorTextPlaceholder | 控制占位文本的颜色。 | string | rgba(0,0,0,0.25) |
| colorTextQuaternary | 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。 | string | rgba(0,0,0,0.25) |
| colorTextTertiary | 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。 | string | rgba(0,0,0,0.45) |
| colorWarning | 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。 | string | #faad14 |
| colorWarningAffix | 控制表单控件前后缀在警告状态下的颜色。 | string | #faad14 |
| colorWarningBg | 警戒色的浅色背景颜色 | string | #fffbe6 |
| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | string | #fff1b8 |
| colorWarningBorderHover | 警戒色的描边色悬浮态 | string | #ffd666 |
| colorWarningText | 警戒色的文本默认态 | string | #faad14 |
| borderRadius | 基础组件的圆角大小，例如按钮、输入框、卡片等 | number | 6 |
| borderRadiusLG | LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。 | number | 8 |
| borderRadiusSM | SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角 | number | 4 |
| borderRadiusXS | XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。 | number | 2 |
| boxShadowSecondary | 控制元素二级阴影样式。 | string | 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05) |
| controlHeight | Ant Design 中按钮和输入框等基础控件的高度 | number | 32 |
| controlHeightLG | 较高的组件高度 | number | 40 |
| controlHeightSM | 较小的组件高度 | number | 24 |
| controlItemBgActive | 控制组件项在激活状态下的背景颜色。 | string | #e6f4ff |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeLG | 大号字体大小 | number | 16 |
| fontSizeSM | 小号字体大小 | number | 12 |
| fontWeightStrong | 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。 | number | 600 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineHeightLG | 大型文本行高 | number | 1.5 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthBold | 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。 | number | 2 |
| marginXS | 控制元素外边距，小尺寸。 | number | 8 |
| marginXXS | 控制元素外边距，最小尺寸。 | number | 4 |
| motionDurationMid | 动效播放速度，中速。用于中型元素动画交互 | string | 0.2s |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| motionEaseInOutCirc | 预设动效曲率 | string | |
| motionEaseInQuint | 预设动效曲率 | string | |
| motionEaseOutCirc | 预设动效曲率 | string | |
| motionEaseOutQuint | 预设动效曲率 | string | |
| padding | 控制元素的内间距。 | number | 16 |
| paddingSM | 控制元素的小内间距。 | number | 12 |
| paddingXS | 控制元素的特小内间距。 | number | 8 |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |
| sizePopupArrow | 组件箭头的尺寸 | number | 16 |
请参考常见问答
当用户选择完年份后，系统会直接切换至日期面板，而非显式提供月份选择。这样做的设计在于用户只需进行一次点击即可完成年份修改，无需再次点击进入月份选择界面，从而减少了用户的操作负担，同时也避免需要额外感知月份的记忆负担。
请参考《使用自定义日期库》
参考 FAQ 为什么时间类组件的国际化 locale 设置不生效？。
请使用正确的语言包（#5605），或者修改 dayjs 的 locale 配置：https://codesandbox.io/s/dayjs-day-of-week-x9tuj2?file=/demo.tsx
import dayjs from 'dayjs';import 'dayjs/locale/zh-cn';import updateLocale from 'dayjs/plugin/updateLocale';dayjs.extend(updateLocale);dayjs.updateLocale('zh-cn', {weekStart: 0,});
panelRender 时，原来面板无法切换？当你通过 panelRender 动态改变层级结构时，会使得原本的 Panel 被当做新的节点删除并创建。这使得其原本的状态会被重置，保持结构稳定即可。详情请参考 #27263。
欢迎阅读博客《为什么禁用日期这么难？》了解如何使用。