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
The React Date Picker Component is an essential tool for any React-based application that requires date selection functionality.
Other frameworks
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
About#
This component, provided by CoreUI for React.js, offers a user-friendly interface and various customization options to ensure an excellent user experience.
With its responsive design and support for all modern browsers, the React Date Picker Component can be easily integrated into any application. The component comes with an array of styling options, including color, size, and shape, that can be easily adjusted to fit the application's design.
The React Date Picker Component is also fully customizable, allowing developers to tailor the component to their specific needs. With its set of APIs, developers can control the default value, visibility, and date range of the component.
One of the standout features of the React Date Picker Component is its accessibility. CoreUI has ensured that the component is fully compliant with the Web Content Accessibility Guidelines (WCAG), making it accessible to all users. The component supports keyboard navigation and screen readers, ensuring that users with disabilities can also benefit from its functionality."
Example#
Below is an example of a basic React DatePicker.
1<CDatePicker label="Date" locale="en-US" />2<CDatePicker date="2022/2/16" label="Date" locale="en-US" />
With footer#
Here is an example with the additional footer. The footer can be useful for displaying additional information or actions related to the selected date, such as "Today" or "Clear" buttons. The footer component is fully customizable and can be styled to match the rest of the application.
1<CDatePicker footer locale="en-US" />2<CDatePicker date="2022/2/16" footer locale="en-US" />
With timepicker#
In addition to supporting date selection, our React DatePicker component also includes a TimePicker feature that allows users to select a specific time of day. React TimePicker can be enabled by passing a timepicker prop to the <CDatePicker/> component
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 the React Date Picker 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#
CoreUI React DatePicker component includes a feature that allows you to disable certain dates, such as weekends or holidays. This can be accomplished by passing an array to disabledDate prop to the component, which determines which dates should be disabled based on custom logic.
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-4">13 <CDatePicker14 calendarDate={calendarDate}15 disabledDates={disabledDates}16 locale="en-US"17 maxDate={maxDate}18 minDate={minDate}19 />20 </div>21 </div>22)
Non-english locale#
CoreUI React Date Picker allows users to display dates and times in a non-English locale. This is useful for applications that have international users or need to support multiple languages.
Auto#
By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can simply pass the desired language code as a prop to the DatePicker component. This feature enables to create more inclusive and accessible applications that cater to a diverse audience.
1<CDatePicker />
Chinese#
Below is an example of a basic React Date Picker with Chinese locales.
1<CDatePicker placeholder="入住日期" locale="zh-CN" />
Japanese#
Below is an example of a basic React Date Picker with Japanese locales.
1<CDatePicker placeholder="日付を選択" locale="ja" />
Korean#
Below is an example of a basic React Date Picker with Korean locales.
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>");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#
CDatePicker#
1import { CDatePicker } from '@coreui/react-pro'2// or3import CDatePicker from '@coreui/react-pro/src/components/date-picker/CDatePicker'
| 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 | - |
| 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 | - |
| closeOnSelect 4.8.0+ | If true the dropdown will be immediately closed after submitting the full date. | boolean | - |
| 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' | - |
| date | Initial selected date. | string | Date | - |
| 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[])[] | - |
| 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 attribute for the input element is generated based on the id property:- {id}-date | string | - |
| indicator | Toggle visibility or set the content of the input indicator. | ReactNode | - |
| 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 | - |
| onDateChange | Callback fired when the 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 | - |
| 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[] | Select 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 | - |
| 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 | - |
| 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' | - |
| 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 | - |
| separator | Default icon or character character that separates two dates. | ReactNode | - |
| 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' | - |
| 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 |