React Date Picker Component

Create consistent cross-browser and cross-device date picker

Example#

1<CDatePicker locale="en-US" />
2<CDatePicker date="2022/2/16" locale="en-US" />
1<CDatePicker footer locale="en-US" />
2<CDatePicker date="2022/2/16" footer locale="en-US" />

With timepicker#

1<CDatePicker locale="en-US" timepicker />
2<CDatePicker date="2023/03/15 02:22:13 PM" locale="en-US" timepicker />

Sizing#

Set heights using size property like size="lg" and size="sm".

1<CDatePicker locale="en-US" size="lg" />
2<CDatePicker 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<CDatePicker disabled locale="en-US" />

Readonly#

Add the inputReadOnly boolean attribute to prevent modification of the input's value.

1<CDatePicker 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-4">
13 <CDatePicker
14 calendarDate={calendarDate}
15 disabledDates={disabledDates}
16 locale="en-US"
17 maxDate={maxDate}
18 minDate={minDate}
19 />
20 </div>
21 </div>
22)

Non-english locale#

Auto#

1<CDatePicker />

Chinese#

1<CDatePicker placeholder="入住日期" locale="zh-CN" />

Japanese#

1<CDatePicker placeholder="日付を選択" locale="ja" />

Korean#

1<CDatePicker placeholder="날짜 선택" locale="ko" />

Right to left support#

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew#

1<CDatePicker placeholder="בחר תאריך" locale="he-IL" />

Persian#

1<CDatePicker placeholder="تاریخ شروع" locale="fa-IR" />

API#

CDatePicker#

1import { CDatePicker } from '@coreui/react-pro'
2// or
3import CDatePicker from '@coreui/react-pro/src/components/date-picker/CDatePicker'
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-
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.boolean-
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'-
dateInitial selected date.string | Date-
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[][]-
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.ReactNode-
inputReadOnlyToggle the readonly state for the component.boolean-
localeSets the default locale for components. If not set, it is inherited from the browser.string'default'
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-
onDateChangeCallback fired when the 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-
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[]Select 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-
rangesButtonsColorSets the color context of the cancel button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string-
rangesButtonsSizeSize the ranges button small or large.'sm' | 'lg'-
rangesButtonsVariantSet the ranges button variant to an outlined button or a ghost button.'outline' | 'ghost'-
separatorDefault icon or character character that separates two dates.ReactNode-
sizeSize the component small or large.'sm' | 'lg'-
timepickerProvide an additional time selection by adding select boxes to choose times.boolean-
todayButtonToggle visibility or set the content of today button.ReactNode'Today'
todayButtonColorSets the color context of the today button to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string'primary'
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