DatePicker

Choose a date. Support year, month, week, day type, support range selection, etc.

Install

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

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

• Basic: The basic usage of DatePicker.
• Status: date inputter in different states
• Prefix: Set the prefix via the prefix property
• MonthPicker: The basic usage of MonthPicker.
• YearPicker: The basic usage of the YearPicker.
• WeekPicker: The basic usage of WeekPicker.
• QuarterPicker: The basic usage of QuarterPicker.
• DatePicker showTime: Use showTime to select a date with time.
• RangePicker: The basic usage of RangePicker.
• defaultValue: DatePicker has a default value.
• disabled date: Use disabledDate to disable specified dates. 2.5.0 starts to support disabledTime to disable time, which needs to be used with showTime.
• Shortcuts: Use shortcuts to preset time for quick selection.
• Custom shortcuts position: Use shortcutsPlacementLeft to place the shortcuts to the left.
• Dynamic control range: According to the selected value to control the selected range, use onSelect and disabledDate. If showTime is set, the comparison dimension needs to be converted to day.
• Size: Setting size can use four sizes (mini small default large). The height corresponds to 24px, 32px, 36px, 40px.
• Extra footer: Add an extra footer to meet the needs of some customized information.
• Disabled: Disabled.
• Customize cell: Use dateRender to customize date cells.
• Under Control: value and onChange should be used together,
• Customize trigger element: Customize trigger element.
• Panel Only: Only use panel, hide input selection.
• UTC: Use utcOffset to set the UTC time. Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.
• Timezone: Use timezone to set timezone, if set the utcOffset, utcOffset takes effect. Note: When using UTC or time zonetime, use timestamp or Date object when passing value. Strings cannot represent unique time, which will cause trouble.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

picker are shared by all types

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[];
};