Framework:
CoreUI PRO Component
To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
React Date Range Picker Component
Create consistent cross-browser and cross-device date range picker
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
Example#
1<CDateRangePicker label="Date range" locale="en-US" />2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" label="Date range" locale="en-US" />
With footer#
1<CDateRangePicker footer locale="en-US" />2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />
With timepicker#
1<CDateRangePicker locale="en-US" timepicker />
Sizing#
Set heights using size property like size="lg" and size="sm".
1<CDateRangePicker locale="en-US" size="lg" />2<CDateRangePicker locale="en-US" size="sm" />
Disabled#
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
1<CDateRangePicker disabled locale="en-US" />
Readonly#
Add the inputReadOnly boolean attribute to prevent modification of the input's value.
1<CDateRangePicker inputReadOnly locale="en-US" />
Disabled dates#
1const calendarDate = new Date(2022, 2, 1)2const disabledDates = [3 [new Date(2022, 2, 4), new Date(2022, 2, 7)], // range of dates that cannot be selected4 new Date(2022, 2, 16), // single date that cannot be selected5 new Date(2022, 3, 16), // single date that cannot be selected6 [new Date(2022, 4, 2), new Date(2022, 4, 8)], // range of dates that cannot be selected7]8const maxDate = new Date(2022, 5, 0)9const minDate = new Date(2022, 1, 1)10return (11 <div className="row">12 <div className="col-lg-5">13 <CDateRangePicker14 calendarDate={calendarDate}15 disabledDates={disabledDates}16 locale="en-US"17 maxDate={maxDate}18 minDate={minDate}19 />20 </div>21 </div>22)
Custom ranges#
1const customRanges = {2 Today: [new Date(), new Date()],3 Yesterday: [4 new Date(new Date().setDate(new Date().getDate() - 1)),5 new Date(new Date().setDate(new Date().getDate() - 1)),6 ],7 'Last 7 Days': [8 new Date(new Date().setDate(new Date().getDate() - 6)),9 new Date(new Date()),10 ],11 'Last 30 Days': [12 new Date(new Date().setDate(new Date().getDate() - 29)),13 new Date(new Date()),14 ],15 'This Month': [16 new Date(new Date().setDate(1)),17 new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),18 ],19 'Last Month': [20 new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),21 new Date(new Date().getFullYear(), new Date().getMonth(), 0),22 ],23}24return (25 <div className="row">26 <div className="col-lg-5">27 <CDateRangePicker ranges={customRanges} />28 </div>29 </div>30)
Non-english locale#
Auto#
1<CDateRangePicker />
Chinese#
1<CDateRangePicker locale="zh-CN" placeholder={["入住日期", "退房日期"]} />
Japanese#
1<CDateRangePicker locale="ja" placeholder={["日付を選択", "終了日"]} />
Korean#
1<CDateRangePicker locale="ko" placeholder={["날짜 선택", "종료일"]} />
Right to left support#
RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.
Hebrew#
1<CDateRangePicker placeholder={["בחר תאריך", "תאריך סיום"]} locale="he-IL" />
Persian#
1<CDateRangePicker locale="fa-IR" placeholder={["تاریخ شروع", "تاریخ پایان"]} />
Customizing#
CSS variables#
React date range pickers use local CSS variables on .date-picker and .calendar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1--cui-date-picker-ranges-width: #{$date-picker-ranges-width};2--cui-date-picker-ranges-padding: #{$date-picker-ranges-padding};3--cui-date-picker-ranges-border: #{$date-picker-ranges-border-width} solid #{$date-picker-ranges-border-color};4--cui-date-picker-timepicker-width: #{$date-picker-timepicker-width};5--cui-date-picker-timepicker-border-top: #{$date-picker-timepicker-border-width} solid #{$date-picker-timepicker-border-color};
1--cui-calendar-table-margin: #{$calendar-table-margin};2--cui-calendar-table-cell-size: #{$calendar-table-cell-size};3--cui-calendar-nav-padding: #{$calendar-nav-padding};4--cui-calendar-nav-border: #{$calendar-nav-border-width} solid #{$calendar-nav-border-color};5--cui-calendar-nav-date-color: #{$calendar-nav-date-color};6--cui-calendar-nav-date-hover-color: #{$calendar-nav-date-hover-color};7--cui-calendar-nav-icon-width: #{$calendar-nav-icon-width};8--cui-calendar-nav-icon-height: #{$calendar-nav-icon-height};9--cui-calendar-cell-header-inner-color: #{$calendar-cell-header-inner-color};10--cui-calendar-cell-hover-bg: #{$calendar-cell-hover-bg};11--cui-calendar-cell-disabled-color: #{$calendar-cell-disabled-color};12--cui-calendar-cell-selected-color: #{$calendar-cell-selected-color};13--cui-calendar-cell-selected-bg: #{$calendar-cell-selected-bg};14--cui-calendar-cell-range-bg: #{$calendar-cell-range-bg};15--cui-calendar-cell-range-hover-bg: #{$calendar-cell-range-hover-bg};16--cui-calendar-cell-range-hover-border-color: #{$calendar-cell-range-hover-border-color};17--cui-calendar-cell-today-color: #{$calendar-cell-today-color};
How to use CSS variables#
1const vars = {2 '--my-css-var': 10,3 '--my-another-css-var': "red"4}5return <CDateRangePicker style={vars}>...</CDateRangePicker>
SASS variables#
1$date-picker-default-icon-color: $gray-600;2$date-picker-default-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><path fill='#{$date-picker-default-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path><rect width='32' height='32' x='112' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='224' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='296' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='112' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='200' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='280' y='368' fill='#{$date-picker-default-icon-color}'></rect><rect width='32' height='32' x='368' y='368' fill='#{$date-picker-default-icon-color}'></rect></svg>");34$date-picker-cleaner-icon-color: $gray-600;5$date-picker-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-color}' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");6$date-picker-cleaner-icon-hover-color: $body-color;7$date-picker-cleaner-icon-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-cleaner-icon-hover-color}' points='306.912 214.461 256 265.373 205.088 214.461 182.461 237.088 233.373 288 182.461 338.912 205.088 361.539 256 310.627 306.912 361.539 329.539 338.912 278.627 288 329.539 237.088 306.912 214.461'></polygon><path fill='#{$date-picker-cleaner-icon-hover-color})' d='M472,96H384V40H352V96H160V40H128V96H40a24.028,24.028,0,0,0-24,24V456a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V120A24.028,24.028,0,0,0,472,96Zm-8,352H48V128h80v40h32V128H352v40h32V128h80Z'></path></svg>");89$date-picker-separator-icon-color: $gray-600;10$date-picker-separator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='359.873 121.377 337.246 144.004 433.243 240.001 16 240.001 16 240.002 16 272.001 16 272.002 433.24 272.002 337.246 367.996 359.873 390.623 494.498 256 359.873 121.377'></polygon></svg>");11$date-picker-separator-icon-rtl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$date-picker-separator-icon-color}' points='497.333 239.999 80.092 239.999 176.087 144.004 153.46 121.377 18.837 256 153.46 390.623 176.087 367.996 80.09 271.999 497.333 271.999 497.333 239.999'></polygon></svg>");1213$date-picker-ranges-width: 10rem;14$date-picker-ranges-padding: $spacer * .5;15$date-picker-ranges-border-width: 1px;16$date-picker-ranges-border-color: $border-color;1718$date-picker-timepicker-width: (7 * $calendar-table-cell-size) + (2 * $calendar-table-margin);19$date-picker-timepicker-border-width: 1px;20$date-picker-timepicker-border-color: $border-color;
API#
CDateRangePicker#
1import { CDateRangePicker } from '@coreui/react-pro'2// or3import CDateRangePicker from '@coreui/react-pro/src/components/date-range-picker/CDateRangePicker'
| Property | Description | Type | Default |
|---|---|---|---|
| alignment | Set aligment of dropdown menu. | 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} | - |
| calendarDate | Default date of the component | string | Date | - |
| calendars | The number of calendars that render on desktop devices. | number | 2 |
| cancelButton | Toggle visibility or set the content of cancel button. | ReactNode | 'Cancel' |
| cancelButtonColor | Sets the color context of the cancel button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | 'primary' |
| cancelButtonSize | Size the cancel button small or large. | 'sm' | 'lg' | 'sm' |
| cancelButtonVariant | Set the cancel button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | 'ghost' |
| className | A string of all className you want applied to the component. | string | - |
| cleaner | Toggle visibility or set the content of the cleaner button. | boolean | true |
| closeOnSelect 4.8.0+ | If true the dropdown will be immediately closed after submitting the full date. | boolean | true |
| confirmButton | Toggle visibility or set the content of confirm button. | ReactNode | 'OK' |
| confirmButtonColor | Sets the color context of the confirm button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | 'primary' |
| confirmButtonSize | Size the confirm button small or large. | 'sm' | 'lg' | 'sm' |
| confirmButtonVariant | Set the confirm button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |
| container | Set container type for the component. | 'inline' | 'dropdown' | - |
| dayFormat 4.3.0+ | Set the format of day name. | 'numeric' | '2-digit' | ((date: Date) => string | number) | 'numeric' |
| direction | Sets a specified direction and location of the dropdown menu. | 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart' | - |
| disabled | Toggle the disabled state for the component. | boolean | - |
| disabledDates | Specify the list of dates that cannot be selected. | Date[] | Date[][] | (Date | Date[])[] | - |
| endDate | Initial selected to date (range). | string | Date | - |
| feedback 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackInvalid 4.2.0+ | Provide valuable, actionable feedback. | ReactNode | - |
| feedbackValid 4.2.0+ | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, :invalid and :valid. | ReactNode | - |
| firstDayOfWeek | Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, | number | 1 |
| floatingClassName 4.5.0+ | A string of all className you want applied to the floating label wrapper. | string | - |
| footer | Toggle visibility of footer element or set the content of footer. | ReactNode | - |
| footerContent | Add custom elements to the footer. | ReactNode | - |
| format | Set date format. We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns. | string | - |
| id | The id global attribute defines an identifier (ID) that must be unique in the whole document. The name attributes for input elements are generated based on the id property:- {id}-start-date - {id}-end-date | string | - |
| indicator | Toggle visibility or set the content of the input indicator. | ReactNode | true |
| inputReadOnly | Toggle the readonly state for the component. | boolean | - |
| invalid | Set component validation state to invalid. | boolean | - |
| label 4.2.0+ | Add a caption for a component. | ReactNode | - |
| locale | Sets the default locale for components. If not set, it is inherited from the browser. | string | default |
| maxDate | Max selectable date. | string | Date | - |
| minDate | Min selectable date. | string | Date | - |
| navNextDoubleIcon | The custom next double icon. | ReactNode | - |
| navNextIcon | The custom next icon. | ReactNode | - |
| navPrevDoubleIcon | The custom prev double icon. | ReactNode | - |
| navPrevIcon | The custom prev icon. | ReactNode | - |
| navYearFirst 4.3.0+ | Reorder year-month navigation, and render year first. | boolean | - |
| navigation | Show arrows navigation. | boolean | - |
| onCancel | Callback fired when the cancel button has been clicked. | () => void | - |
| onConfirm | Callback fired when the confirm button has been clicked. | () => void | - |
| onEndDateChange | Callback fired when the end date changed. | (date: Date, formatedDate?: string) => void | - |
| onHide | Callback fired when the component requests to be hidden. | () => void | - |
| onSelectEndChange | Callback fired when the selection type changed. | (value: boolean) => void | - |
| onShow | Callback fired when the component requests to be shown. | () => void | - |
| onStartDateChange | Callback fired when the start date changed. | (date: Date, formatedDate?: string) => void | - |
| onViewChanged | Callback fired when the view type of calendar changed. | (view: string) => void | - |
| placeholder | Specifies short hints that are visible in start date and end date inputs. | string | string[] | ['Start date', 'End date'] |
| placement | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | - |
| popper | If you want to disable dynamic positioning set this property to true. | boolean | - |
| portal 4.8.0+ | Generates dropdown menu using createPortal. | boolean | - |
| ranges | Predefined date ranges the user can select from. | object | - |
| rangesButtonsColor | Sets the color context of the cancel button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | secondary |
| rangesButtonsSize | Size the ranges button small or large. | 'sm' | 'lg' | - |
| rangesButtonsVariant | Set the ranges button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | ghost |
| required 4.10.0+ | When present, it specifies that date must be filled out before submitting the form. | boolean | - |
| selectAdjacementDays 4.11.0+ | Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacementDays option is set to true. | boolean | - |
| selectEndDate | Toggle select mode between start and end date. | boolean | - |
| separator | Default icon or character character that separates two dates. | ReactNode | true |
| showAdjacementDays 4.11.0+ | Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. | boolean | - |
| size | Size the component small or large. | 'sm' | 'lg' | - |
| startDate | Initial selected date. | string | Date | - |
| text 4.2.0+ | Add helper text to the component. | ReactNode | - |
| timepicker | Provide an additional time selection by adding select boxes to choose times. | boolean | - |
| todayButton | Toggle visibility or set the content of today button. | ReactNode | Today |
| todayButtonColor | Sets the color context of the today button to one of CoreUI’s themed colors. | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string | primary |
| todayButtonSize | Size the today button small or large. | 'sm' | 'lg' | sm |
| todayButtonVariant | Set the today button variant to an outlined button or a ghost button. | 'outline' | 'ghost' | - |
| toggler | The content of toggler. | ReactNode | - |
| tooltipFeedback 4.2.0+ | Display validation feedback in a styled tooltip. | boolean | - |
| valid | Set component validation state to valid. | boolean | - |
| visible | Toggle the visibility of dropdown menu component. | boolean | - |
| weekdayFormat | Set length or format of day name. | number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number) | 2 |
On this page