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 Picker Component

Create consistent cross-browser and cross-device date 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<CDatePicker label="Date" locale="en-US" />
2<CDatePicker date="2022/2/16" label="Date" 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" />

Customizing#

CSS variables#

React date 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 <CDatePicker style={vars}>...</CDatePicker>

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>");
3
4$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>");
8
9$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>");
12
13$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;
17
18$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#

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-
closeOnSelect
4.8.0+
If true the dropdown will be immediately closed after submitting the full date.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-
dayFormat
4.3.0+
Set the format of day name.'numeric' | '2-digit' | ((date: Date) => string | number)'numeric'
directionSets a specified direction and location of the dropdown menu.'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'-
disabledToggle the disabled state for the component.boolean-
disabledDatesSpecify the list of dates that cannot be selected.Date[] | Date[][] | (Date | 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-
firstDayOfWeekSets the day of start week.
- 0 - Sunday,
- 1 - Monday,
- 2 - Tuesday,
- 3 - Wednesday,
- 4 - Thursday,
- 5 - Friday,
- 6 - Saturday,
number1
floatingClassName
4.5.0+
A string of all className you want applied to the floating label wrapper.string-
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-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.

The name attribute for the input element is generated based on the id property:
- {id}-date
string-
indicatorToggle visibility or set the content of the input indicator.ReactNode-
inputReadOnlyToggle the readonly state for the component.boolean-
invalidSet component validation state to invalid.boolean-
label
4.2.0+
Add a caption for a component.ReactNode-
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-
navYearFirst
4.3.0+
Reorder year-month navigation, and render year first.boolean-
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'-
text
4.2.0+
Add helper text to the component.ReactNode-
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-
tooltipFeedback
4.2.0+
Display validation feedback in a styled tooltip.boolean-
validSet component validation state to valid.boolean-
visibleToggle the visibility of dropdown menu component.boolean-
weekdayFormatSet length or format of day name.number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number)2