React Date Range Picker Component

Create consistent cross-browser and cross-device date range picker

Example#

1<CDateRangePicker locale="en-US" />
2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" locale="en-US" />
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 selected
4 new Date(2022, 2, 16), // single date that cannot be selected
5 new Date(2022, 3, 16), // single date that cannot be selected
6 [new Date(2022, 4, 2), new Date(2022, 4, 8)], // range of dates that cannot be selected
7]
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 <CDateRangePicker
14 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={["تاریخ شروع", "تاریخ پایان"]} />

API#

CDateRangePicker#

1import { CDateRangePicker } from '@coreui/react-pro'
2// or
3import CDateRangePicker from '@coreui/react-pro/src/components/date-range-picker/CDateRangePicker'
PropertyDescriptionTypeDefault
alignmentSet aligment of dropdown menu.'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}-
calendarDateDefault date of the componentstring | Date-
calendarsThe number of calendars that render on desktop devices.number2
cancelButtonToggle visibility or set the content of cancel button.ReactNode'Cancel'
cancelButtonColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string'primary'
cancelButtonSizeSize the cancel button small or large.'sm' | 'lg''sm'
cancelButtonVariantSet the cancel button variant to an outlined button or a ghost button.'outline' | 'ghost''ghost'
classNameA string of all className you want applied to the component.string-
cleanerToggle visibility or set the content of the cleaner button.booleantrue
confirmButtonToggle visibility or set the content of confirm button.ReactNode'OK'
confirmButtonColorSets the color context of the confirm button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string'primary'
confirmButtonSizeSize the confirm button small or large.'sm' | 'lg''sm'
confirmButtonVariantSet the confirm button variant to an outlined button or a ghost button.'outline' | 'ghost'-
containerSet container type for the component.'inline' | 'dropdown'-
directionSets a specified direction and location of the dropdown menu.'dropup' | 'dropend' | 'dropstart'-
disabledToggle the disabled state for the component.boolean-
disabledDatesSpecify the list of dates that cannot be selected.Date[] | Date[][]-
endDateInitial selected to date (range).string | Date-
firstDayOfWeekSets the day of start week.
- 0 - Sunday,
- 1 - Monday,
- 2 - Tuesday,
- 3 - Wednesday,
- 4 - Thursday,
- 5 - Friday,
- 6 - Saturday,
number1
footerToggle visibility of footer element or set the content of footer.ReactNode-
footerContentAdd custom elements to the footer.ReactNode-
formatSet date format.
We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
string-
indicatorToggle visibility or set the content of the input indicator.ReactNodetrue
inputReadOnlyToggle the readonly state for the component.boolean-
localeSets the default locale for components. If not set, it is inherited from the browser.stringdefault
maxDateMax selectable date.string | Date-
minDateMin selectable date.string | Date-
navNextDoubleIconThe custom next double icon.ReactNode-
navNextIconThe custom next icon.ReactNode-
navPrevDoubleIconThe custom prev double icon.ReactNode-
navPrevIconThe custom prev icon.ReactNode-
navigationShow arrows navigation.boolean-
onCancelCallback fired when the cancel button has been clicked.() => void-
onConfirmCallback fired when the confirm button has been clicked.() => void-
onEndDateChangeCallback fired when the end date changed.(date: Date, formatedDate?: string) => void-
onHideCallback fired when the component requests to be hidden.() => void-
onSelectEndChangeCallback fired when the selection type changed.(value: boolean) => void-
onShowCallback fired when the component requests to be shown.() => void-
onStartDateChangeCallback fired when the start date changed.(date: Date, formatedDate?: string) => void-
onViewChangedCallback fired when the view type of calendar changed.(view: string) => void-
placeholderSpecifies short hints that are visible in start date and end date inputs.string | string[]['Start date', 'End date']
placementDescribes 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'-
popperIf you want to disable dynamic positioning set this property to true.boolean-
rangesPredefined date ranges the user can select from.object-
rangesButtonsColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringsecondary
rangesButtonsSizeSize the ranges button small or large.'sm' | 'lg'-
rangesButtonsVariantSet the ranges button variant to an outlined button or a ghost button.'outline' | 'ghost'ghost
selectEndDateToggle select mode between start and end date.boolean-
separatorDefault icon or character character that separates two dates.ReactNodetrue
sizeSize the component small or large.'sm' | 'lg'-
startDateInitial selected date.string | Date-
timepickerProvide an additional time selection by adding select boxes to choose times.boolean-
todayButtonToggle visibility or set the content of today button.ReactNodeToday
todayButtonColorSets the color context of the today button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | stringprimary
todayButtonSizeSize the today button small or large.'sm' | 'lg'sm
todayButtonVariantSet the today button variant to an outlined button or a ghost button.'outline' | 'ghost'-
togglerThe content of toggler.ReactNode-
visibleToggle the visibility of dropdown menu component.boolean-
weekdayFormatSet length or format of day name.number | 'long' | 'narrow' | 'short'2