DatePicker 时间选择器

DatePicker 是一个高度可定制的组件,用户可以输入或选择不同格式的日期和时间。

获取组件

import { DatePicker } from 'rsuite';

演示

默认

自定义日期格式

尺寸

一键选值

外观

撑满

占位符

ISO week

国际标准 ISO 8601 定义,每个日历星期从星期一开始,星期日为第 7 天, ISO week date.

可以通过 isoWeek 属性设置以 ISO 标准显示日历面板。

禁用与只读

加载中状态

具有标签

禁用输入

DatePicker 默认是可以通过键盘输入日期和时间的,如果您希望禁用它,可以通过设置 editable={false} 来禁用输入。

设置本地语言

DatePicker 支持本地语言自定义配置,但是我们更推荐使用统一本地化语言配置。

位置

提示:设置为 auto*时, 尝试滚动页面,或者改变浏览器大小,会自动显示在合适的位置。

自定义快捷项

示例中点击“Prev Day”,不会关闭浮层,是因为配置 closeOverlay=false 参数,该参数用于设置点击快捷项以后是否关闭浮层,默认为 true

受控与非受控的值

选择范围

显示周数

自定义日历图标

自定义渲染单元格

原生的选择器

如果您只需要满足简单的日期选择功能,完全可以使用浏览器支持的原生选择器。

可访问性

ARIA 属性

默认拥有 DateInput 组件的 ARIA 属性。

  • 当值无效时,aria-invalid="true" 属性被添加到 <input> 元素。
  • 当设置了 label, aria-labelledby 属性被添加到 <input> 元素和 dialog 元素上,并将值设置为 labelid 属性值。
  • 拥有 aria-haspopup="dialog" 属性,用于指示组件拥有一个可交互的弹出层。

键盘交互

默认拥有 DateInput 组件的键盘交互。

  • 当焦点在日历面板上时,使用 键切切换日期。
  • 当焦点在日历面板上时,使用 Enter 键选中日期。
  • 当 DatePicker 组件设置了 editable={false} 来禁用输入,使用 将焦点移到日历面板。

Props

<DatePicker>

属性名称 类型(默认值) 描述
appearance 'default' | 'subtle' ('default') 设置外观
block boolean 堵塞整行
calendarDefaultDate Date 日历面板默认呈现的日期时间
caretAs ElementType 自定义右侧箭头图标的组件
cleanable boolean (true) 可以清除
container HTMLElement | (() => HTMLElement) 设置渲染的容器
defaultOpen boolean 默认打开
defaultValue Date 默认值
disabled boolean 禁用组件
disabledDate (date:Date) => boolean ⚠️[已弃用] 使用 shouldDisableDate 代替
disabledHours (hour:number, date:Date) => boolean ⚠️[已弃用] 使用 shouldDisableHour 代替
disabledMinutes (minute:number, date:Date) => boolean ⚠️[已弃用] 使用 shouldDisableMinute 代替
disabledSeconds (second:number, date:Date) => boolean ⚠️[已弃用] 使用 shouldDisableSecond 代替
editable boolean (true) 渲染为 Input 输入框,可以通过键盘输入日期
format string ('yyyy-MM-dd') 日期显示格式化
hideHours (hour:number, date:Date) => boolean 隐藏小时
hideMinutes (minute:number, date:Date) => boolean 隐藏分钟
hideSeconds (second:number, date:Date) => boolean 隐藏秒
isoWeek boolean ISO 8601 标准, 每个日历星期从星期一开始,星期日为第 7 天
label ReactNode 在按钮开头显示的标签
limitEndYear number (1000) 相对当前选择日期,设置可选年份上限
limitStartYear number 相对当前选择日期,设置可选年份下限
loading boolean (false) 是否显示一个加载中状态指示器
locale CalendarLocaleType 本地化的文本
menuClassName string 选项菜单的 className
onChange (date: Date) => void 值改变后的回调函数
onChangeCalendarDate (date: Date, event) => void 日历日期改变后的回调函数
onClean (event) => void 清除值后的回调函数
onClose () => void 关闭回调函数
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
oneTap boolean 一个点击完成选择日期
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onNextMonth (date: Date) => void 切换到下一月的回调函数
onOk (date: Date, event) => void 点击确定后的回调函数
onOpen () => void 打开回调函数
onPrevMonth (date: Date) => void 切换到上一月的回调函数
onSelect (date: Date) => void 选择日期或者时间的回调函数
onShortcutClick (shortcut: Range, event) => void 点击快捷项的回调函数
onToggleMonthDropdown (open: boolean) => void 切换到月份视图的回调函数
onToggleTimeDropdown (open: boolean) => void 切换到时间视图的回调函数
open boolean 打开 (受控)
placeholder string 没有值时候默认显示内容
placement Placement ('bottomStart') 显示位置
preventOverflow boolean 防止浮动元素溢出
ranges Range[] (Ranges) 快捷项配置
renderCell (date: Date) => ReactNode 自定义渲染日历单元格
shouldDisableDate (date:Date) => boolean 禁用日期
shouldDisableHour (hour:number, date:Date) => boolean 禁用小时
shouldDisableMinute (minute:number, date:Date) => boolean 禁用分钟
shouldDisableSecond (second:number, date:Date) => boolean 禁用秒
showMeridian boolean 显示 12 小时制的时间格式
showWeekNumbers boolean 显示周数量
size 'lg' | 'md' | 'sm' | 'xs' ('md') 组件设置尺寸
value Date 值`受控

ts:Placement

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';

ts:Range

interface Range {
  label: ReactNode;
  value: Date | ((date: Date) => Date);
  closeOverlay?: boolean;

  // Sets the position where the predefined range is displayed, the default is bottom.
  placement?: 'bottom' | 'left';
}

ts:Ranges

import { addDays } from 'date-fns';

const Ranges = [
  {
    label: 'today',
    value: new Date(),
    closeOverlay: true
  },
  {
    label: 'yesterday',
    value: addDays(new Date(), -1),
    closeOverlay: true
  }
];
Vercel banner