DateRangePicker 日期范围选择器

用于快速选择一个日期范围

如果 <DateRangePicker> 不能满足您选择时间范围的业务场景,可以采用两个 DatePicker 组合。

获取组件

import { DateRangePicker } from 'rsuite';

// or
import DateRangePicker from 'rsuite/DateRangePicker';

演示

默认

日期时间或时间

外观

尺寸

撑满

占位符

选择整周、整月

如果使用 isoWeek 选择整周,会根据 ISO 8601 标准,每个日历星期从星期一开始,星期日为第 7 天,请参考第二个示例。

一键选值

显示周数

显示一个日历

禁用与只读

disabledDate 是一个函数类型属性,它会在渲染日历以及选择日期的地方调用,可以根据业务自定义需要禁用的选项。格式如下:

disabledDate(
 date: Date,              // 用于判断是否需要禁用的日期
 selectDate: Array<Date>, // 选择的日期
 selectedDone: boolean,     // 当前是否选择完成。如果为 false, 则只选择了开始日期,等待选择结束日期
 target: 'CALENDAR', 'TOOLBAR_BUTTON_OK', 'TOOLBAR_SHORTCUT'   // disabledDate 调用的位置
) => boolean

为了更方便的设置需要禁用的日期,DateRangePicker 提供一些方法方便调用,示例:

import { DateRangePicker } from 'rsuite';

const { combine, allowedMaxDays, beforeToday } = DateRangePicker;

ReactDOM.render(<DateRangePicker disabledDate={combine(allowedMaxDays(7), beforeToday())} />);

allowedMaxDays

允许指定的最多天数,其他日期都禁用

allowedMaxDays(days: number) => boolean

allowedDays

只允许指定的天数,其他日期都禁用

allowedDays(days: number) => boolean

allowedRange

允许指定的日期范围,其他日期都禁用

allowedRange( startDate: string | Date, endDate: string | Date) => boolean

after

禁用指定日期之后的日期

after(date?: string | Date) => boolean

afterToday

禁用今天之后的日期

afterToday() => boolean

before

禁用指定日期之前的日期

before(date?: string | Date) => boolean

beforeToday

禁用今天之前的日期

beforeToday() => boolean

combine

用于组合多个条件

combine(...) => boolean

禁用输入

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

自定义快捷键

受控

无障碍设计

了解更多有关无障碍设计的信息。

Props

<DateRangePicker>

属性名称 类型(默认值) 描述
appearance 'default' | 'subtle' ('default') 设置外观
block boolean 堵塞整行
caretAs ElementType 自定义右侧箭头图标的组件
character string (' ~ ') 两个日期之间的分隔符
cleanable boolean (true) 可以清除选择值
container HTMLElement | (() => HTMLElement) 设置渲染的容器
defaultCalendarValue ValueType 默认日历面板日期
defaultOpen boolean 默认打开
defaultValue ValueType 默认值
disabled boolean 禁用组件
disabledDate DisabledDateFunction 已弃用。 使用 shouldDisableDate 代替
editable boolean (true) 渲染为 Input 输入框,可以通过键盘输入日期
format string ('yyyy-MM-dd') 日期显示格式化 参考 date-fns format
hoverRange unions: 'week', 'month' or (date: Date) => ValueType 点击日期时将选中的日期范围
isoWeek boolean ISO 8601 标准, 每个日历星期从星期一开始,星期日为第 7 天
limitEndYear number (1000) 相对当前选择日期,设置可选年份下限
locale CalendarLocaleType 本地化的文本
menuClassName string 选项菜单的 className
onChange (value: ValueType) => void 值改变后的回调函数
onClean (event) => void 清除值后的回调函数
onClose () => void 关闭回调函数
onEnter () => void 显示前动画过渡的回调函数
onEntered () => void 显示后动画过渡的回调函数
onEntering () => void 显示中动画过渡的回调函数
oneTap boolean 是否点击一次就选定日期范围,可配合 hoverRange 使用
onExit () => void 退出前动画过渡的回调函数
onExited () => void 退出后动画过渡的回调函数
onExiting () => void 退出中动画过渡的回调函数
onOk (value: ValueType) => void 点击 确定 按钮后的回调函数
onOpen () => void 打开回调函数
onSelect (data:Date) => void 选择日期的回调函数
open boolean 打开 (受控)
placeholder string 没有值时候默认显示内容
placement Placement ('bottomStart') 显示位置
preventOverflow boolean 防止浮动元素溢出
ranges Range[] (Ranges) 快捷项配置,默认 今天,昨天最近 7 天
renderTitle (date: Date) => ReactNode 自定义渲染日历面板上的月份标题
renderValue (value: ValueType, format: string) => ReactNode 自定义被选中的选项
shouldDisableDate DisabledDateFunction 禁用日期
showMeridian boolean 显示 12 小时制的时间格式
showOneCalendar boolen 显示一个日历
showWeekNumbers boolean 显示周数量
size 'lg' | 'md' | 'sm' | 'xs' ('md') 设置组件尺寸
toggleAs ElementType ('a') 为组件自定义元素类型
value ValueType 受控

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:ValueType

type ValueType = [Date, Date];

ts:DisabledDateFunction

type DisabledDateFunction = (
  /** Date used to determine if disabling is required. */
  date: Date,

  /** Date selected. */
  selectDate?: ValueType,

  /**
   Whether to choose to finish now.
   If `false`, only the start date is selected, waiting for the selection end date.
   */
  selectedDone?: boolean,

  // Call the target of the `disabledDate` function
  target?: 'CALENDAR' | 'TOOLBAR_BUTTON_OK' | 'TOOLBAR_SHORTCUT'
) => boolean;

ts:Ranges

import { startOfDay, endOfDay, addDays, subDays } from 'date-fns';

const Ranges = [
  {
    label: 'today',
    value: [startOfDay(new Date()), endOfDay(new Date())]
  },
  {
    label: 'yesterday',
    value: [startOfDay(addDays(new Date(), -1)), endOfDay(addDays(new Date(), -1))]
  },
  {
    label: 'last7Days',
    value: [startOfDay(subDays(new Date(), 6)), endOfDay(new Date())]
  }
];
Vercel banner