组件

DateRangePicker 日期范围选择器

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

  • <DateRangePicker>

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

获取组件

import { DateRangePicker } from 'rsuite';

演示

默认

外观

尺寸

撑满

Placeholder

选择整周、整月

一键选值

显示周数

显示一个日历

禁用

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

自定义快捷项

受控

设置本地语言

Props

<DateRangePicker>

属性名称 类型(默认值) 描述
appearance enum: 'default', 'subtle' ('default') 设置外观
block boolean 堵塞整行
cleanable boolean (true) 可以清除选择值
container HTMLElement or (() => HTMLElement) 设置渲染的容器
defaultCalendarValue Array<Date> 默认日历面板日期
defaultOpen boolean 默认打开
defaultValue Array<Date> 默认值
disabled boolean 禁用组件
disabledDate (
 date: Date,
 selectDate: Array<Date>,
 selectedDone: boolean,
 target: 'CALENDAR', 'TOOLBAR_BUTTON_OK', 'TOOLBAR_SHORTCUT'
)=>boolean		 禁用日期
hoverRange unions: 'week', 'month' or (date: Date)=> Array<Date> 点击日期时将选中的日期范围
isoWeek boolean ISO 8601 标准， 每个日历星期从星期一开始，星期日为第 7 天
limitEndYear number (1000) 相对当前选择日期，设置可选年份下限
locale Object (Locale) 本地化对应的语言描述
menuClassName string 选项菜单的 className
onChange (value:Array<Date>)=>void 值改变后的回调函数
onClean (event:SyntheticEvent)=>void 清除值后的回调函数
onClose ()=>void 关闭回调函数
onOk (value:Array<Date>)=>void 点击 确定 按钮后的回调函数
onOpen ()=>void 打开回调函数
onSelect (data:Date)=>void 选择日期的回调函数
oneTap boolean 是否点击一次就选定日期范围，可配合 hoverRange 使用
open boolean 打开 (受控)
placeholder string 没有值时候默认显示内容
placement enum: Placement ('bottomStart') 显示位置
preventOverflow boolean 防止浮动元素溢出
ranges Array<Range> (Ranges) 快捷项配置，默认 今天,昨天，最近 7 天
renderValue (value: ValueType, format: string) => React.ReactNode 自定义被选中的选项
showWeekNumbers boolean 显示周数量
showOneCalendar boolen 显示一个日历
size enum: 'lg', 'md', 'sm', 'xs' ('md') 设置组件尺寸
toggleComponentClass React.ElementType ('a') 为组件自定义元素类型
value Array<Date> 值 受控

Default

Locale

const Locale = {
  sunday: 'Su',
  monday: 'Mo',
  tuesday: 'Tu',
  wednesday: 'We',
  thursday: 'Th',
  friday: 'Fr',
  saturday: 'Sa',
  ok: 'OK',
  today: 'Today',
  yesterday: 'Yesterday',
  last7Days: 'Last 7 Days',
  hours: 'Hours',
  minutes: 'Minutes',
  seconds: 'Seconds'
};

Ranges

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