日期选择器 DatePicker

选择日期。支持年、月、周、日类型，支持范围选择等。

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

• 基础用法：日期输入器的基础使用。
• 不同状态：不同状态的日期输入器
• 带有前缀：通过 prefix 属性设置前缀
• 月份选择器：月份输入器的基础使用。
• 年份选择器：年份输入器的基础使用。
• 周选择器：周输入器的基础使用。
• 季度选择器：季度选择器的使用。
• 带时间的日期选择：使用 showTime 可以使用带时间的日期选择。
• 范围选择器：范围输入器的基础使用。
• 默认值：日期输入器有默认值的情况。
• 不可选取的时间：使用 disabledDate 可以禁用某些日期，2.5.0 开始支持 disabledTime 禁用时间，需要配合 showTime 使用。
• 预设时间快捷选择：使用 shortcuts 可以预设时间快捷选择。
• 定制预设范围位置：使用 shortcutsPlacementLeft 可以将预设时间快捷选择放到左边。
• 动态控制选取范围：根据选择的值来控制选取的范围，使用 onSelect 配合 disabledDate 来实现。如果设置了 showTime 需要将比较维度转化为 day。
• 尺寸：设置 size 可以使用四种尺寸（mini small default large）的输入框。高度分别对应 24px、32px、36px、40px。
• 额外的页脚：在浮层中加入额外的页脚，以满足某些定制信息的需求。
• 禁用：禁用状态。
• 定制日期单元格：利用 dateRender 可以定制日期单元格。
• 受控模式：value 和 onChange 应该一起使用。
• 自定义触发元素：自定义触发元素。
• 只使用面板：只是用选择面板，不显示输入框。
• UTC 时间：通过 utcOffset 字段设置 UTC 时间。 注意：使用 UTC 或者时区时间，传值的时候要用 timestamp 或者 Date 对象，使用字符串不能表示唯一时间，会造成困扰。
• 设置时区：通过 timezone 字段设置时区，如果设置了 utcOffset，以 utcOffset 为准。 注意：使用 UTC 或者时区时间，传值的时候要用 timestamp 或者 Date 对象，使用字符串不能表示唯一时间，会造成困扰。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

Picker 为所有组件共有的属性

Picker Props

DatePicker

type CalendarValue = number | string | Date | Dayjs。

WeekPicker

MonthPicker

YearPicker

QuarterPicker

RangePicker

ShortcutType

export type ShortcutType = {
  text: ReactNode;
  value: () => Dayjs | Dayjs[];
} & Record<string, any>;

CalendarValue

export type CalendarValue = number | string | Date | Dayjs;

TimePickerProps

export type TimePickerProps = BaseTimePickerProps & PickerProps;

DisabledTimeProps

export type DisabledTimeProps = {
  disabledHours?: () => number[];
  disabledMinutes?: () => number[];
  disabledSeconds?: () => number[];
};

TimePickerRangeProps

export type TimePickerRangeProps = Omit<TimePickerProps, "defaultValue"> & {
  defaultValue?: CalendarValue[];
};