Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

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" />

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-
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.'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-
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-
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'-
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' | ((date: Date) => string | number)2