DateRangePicker

Used to quickly select a date range

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

Import 

import { DateRangePicker } from 'rsuite';

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

Examples

Basic

Date Time or Time

Appearance

Size

Block

Placeholder

Select Whole Week, Whole Month

One tap

Show Week Numbers

Show One Calendar

Disabled and Readonly

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:

disabledDate(
 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;

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

allowedMaxDays

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

allowedMaxDays(days: number) => boolean

allowedDays

Only allowed days are specified, other dates are disabled

allowedDays(days: number) => boolean

allowedRange

Allow specified date range, other dates are disabled

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

after

Disable dates after the specified date

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

afterToday

Disable dates after today

afterToday() => boolean

before

Disable dates before the specified date

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

beforeToday

Disable dates before today

beforeToday() => boolean

combine

Used to combine multiple conditions

combine(...) => boolean

Disable input

DateRangePicker allows date and time input via keyboard by default, if you wish to disable it, you can disable editing by setting editable={false}.

Predefined Date Ranges

Controlled

Accessibility

Learn more in Accessibility.

Props

<DateRangePicker>

Property Type(default) Description
appearance 'default' | 'subtle' ('default') Set picker appearence
block boolean Blocking an entire row
caretAs ElementType Custom component for the caret icon
character string (' ~ ') The character that separates two dates
cleanable boolean (true) Whether the selected value can be cleared
container HTMLElement | (() => HTMLElement) Sets the rendering container
defaultCalendarValue ValueType Default calendar panel date
defaultOpen boolean Default value of open property
defaultValue ValueType Default value
disabled boolean Whether disabled the component
disabledDate DisabledDateFunction Deprecated. Use shouldDisableDate instead
editable boolean (true) Rendered as an input, the date can be entered via the keyboard
format string ('yyyy-MM-dd') Format date refer to date-fns format
hoverRange unions: 'week', 'month' or (date: Date) => ValueType 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 (current_year + 5) Sets the upper limit of the available year (i.e. 2030)
limitStartYear number Sets the lower limit of the available year (i.e. 1900)
locale CalendarLocaleType Locale text
onChange (value: ValueType) => void Callback fired when value changed
onClean (event) => 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
oneTap boolean Whether to click once on selected date range，Can be used with hoverRange
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: ValueType) => void Callback fired when clicked OK button
onOpen () => void Callback fired when open component
onSelect (date:Date) => void Callback fired when date is selected
open boolean whether open the component
placeholder string Setting placeholders
placement Placement ('bottomStart') The placement of component
preventOverflow boolean Prevent floating element overflow
ranges Range[] (Ranges) Set predefined date ranges the user can select from. Default: Today,Yesterday，Last 7 days
renderTitle (date: Date) => ReactNode Custom render for month's title
renderValue (value: ValueType, format: string) => ReactNode Custom render selected date range
shouldDisableDate DisabledDateFunction Disabled date
showMeridian boolean Display hours in 12 format
showOneCalendar boolen Whether to show only one calendar
showWeekNumbers boolean Whether to show week numbers
size 'lg' | 'md' | 'sm' | 'xs' ('md') A picker can have different sizes
toggleAs ElementType ('a') You can use a custom element for this component
value ValueType Value (Controlled)

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