Used to quickly select a date range

  • <DateRangePicker>

If <DateRangePicker> does not satisfy the business scenario in which you select the time range, you can use two <DatePicker> combinations.


import { DateRangePicker } from 'rsuite';







Select Whole Week, Whole Month

One tap

Show Week Numbers

Show One Calendar


disabledDate is a function type property that is called when the calendar is rendered and the date is selected, and the options that need to be disabled can be customized according to the business. The syntax is as follows:

 date: Date,              // Date used to determine if disabling is required.
 selectDate: Array<Date>, // Date selected.
 selectedDone: boolean,     // Whether to choose to finish now. If `false`, only the start date is selected, waiting for the selection end date.
 target: 'CALENDAR', 'TOOLBAR_BUTTON_OK', 'TOOLBAR_SHORTCUT'   // Call the target of the `disabledDate` function
) => boolean

To make it easier to set the date you want to disable, DateRangePicker provides some methods for easy calling, examples:

import { DateRangePicker } from 'rsuite';

const { combine, allowedMaxDays, beforeToday } = DateRangePicker;

  <DateRangePicker disabledDate={combine(allowedMaxDays(7), beforeToday())} />


Allow the maximum number of days specified, other dates are disabled

allowedMaxDays(days: number) => boolean


Only allowed days are specified, other dates are disabled

allowedDays(days: number) => boolean


Allow specified date range, other dates are disabled

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


Disable dates after the specified date

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


Disable dates after today

afterToday() => boolean


Disable dates before the specified date

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


Disable dates before today

beforeToday() => boolean


Used to combine multiple conditions

combine(...) => boolean

Custom Shortcut Options


Set The Local Language



Property Type(default) Description
appearance enum: 'default', 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
cleanable boolean (true) Whether the selected value can be cleared
container HTMLElement or (() => HTMLElement) Sets the rendering container
defaultCalendarValue Array<Date> Default calendar panel date
defaultOpen boolean Default value of open property
defaultValue Array<Date> Default value
disabled boolean Whether disabled the component
disabledDate (
 date: Date,
 selectDate: Array<Date>,
 selectedDone: boolean,
) => boolean
Disabled data
hoverRange unions: 'week', 'month' or (date: Date) => Array<Date> The date range that will be selected when you click on the date
isoWeek boolean ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
limitEndYear number (1000) Sets the lower limit of the available year relative to the current selection date
onChange (value:Array<Date>) => void Callback fired when value changed
onClean (event:SyntheticEvent) => void Callback fired when value clean
onClose () => void Callback fired when close component
onEnter () => void Callback fired before the overlay transitions in
onEntered () => void Callback fired after the overlay finishes transitioning in
onEntering () => void Callback fired as the overlay begins to transition in
onExit () => void Callback fired right before the overlay transitions out
onExited () => void Callback fired after the overlay finishes transitioning out
onExiting () => void Callback fired as the overlay begins to transition out
onOk (value:Array<Date>) => void Callback fired when clicked OK button
onOpen () => void Callback fired when open component
onSelect (date:Date) => void Callback fired when date is selected
oneTap boolean Whether to click once on selected date range,Can be used with hoverRange
open boolean whether open the component
placeholder string Setting placeholders
placement enum: Placement ('bottomStart') The placement of component
preventOverflow boolean Prevent floating element overflow
ranges Array<Range> (Ranges) Whortcut config,defeult: Today,YesterdayLast 7 days
renderValue (value: ValueType, format: string) => React.ReactNode Custom render selected date range
showOneCalendar boolen Whether to show only one calendar
showWeekNumbers boolean Whether to show week numbers
size enum: 'lg', 'md', 'sm', 'xs' ('md') A picker can have different sizes
toggleComponentClass React.ElementType ('a') You can use a custom element for this component
value Array<Date> Value (Controlled)



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'


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())]
🎉 v5 is released! Head to the v5 documentation to get started.