# React Date Picker Component
> The React Date Picker Component is an essential tool for any React-based application that requires date selection functionality.
## 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.
### Days
Basic examples demonstrating how to pick dates using the React Date Picker Component.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerDaysExample = () => {
return (
)
}
```
#### With footer
The `footer` prop projects your own content below the calendar. Pass a node, or a function receiving the picker's context — `setDate`, `today`, `clear`, `reset`, `close`, `isDateSelectable`, `date` and `disabled` — so a projected button acts on the picker and reads its state. That is also how a "Today" button disables itself when today falls outside `minDate`, `maxDate` or `disabledDates`; the example checks when the panel renders and again on click, so a date that crosses a limit while the panel is open is not written.
Any descendant can reach the same context with the `useDatePicker()` hook.
```html
import React from 'react'
import { CButton, CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerDaysWithFooterExample = () => {
return (
(
<>
isDateSelectable(new Date()) && today()}
size="sm"
variant="ghost"
>
Today
Clear
OK
)}
locale="en-US"
/>
(
<>
Reset
OK
)}
locale="en-US"
/>
)
}
```
### Weeks
Illustration of week selection using the React Date Picker, including week number display.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerWeeksExample = () => {
return (
)
}
```
### Months
Selecting whole months with the React Date Picker Component.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerMonthsExample = () => {
return (
)
}
```
### Quarters
Selecting quarters using the React Date Picker.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerQuartersExample = () => {
return (
)
}
```
### Years
Picking years using the React Date Picker.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerYearsExample = () => {
return (
{' '}
{' '}
)
}
```
## With time
Set `timepicker` to add the time half. The field switches to a date and time mask, the panel grows a row of time selects under the calendar, and picking a day no longer closes the panel — the two halves own different parts of one value, so the interaction is not over until the user says so. While no time is picked, or the field holds a time a list does not offer, each select stands on a `--` placeholder, so every enabled option, the first allowed one included, sets the time.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerTimeExample = () => {
return (
)
}
```
`minDate` and `maxDate` can carry a time of day. Their day stays selectable in the calendar and the time selects disable the hours, minutes and seconds before `minDate` or after `maxDate` on that day. A time the panel sets beyond a limit, such as the current time when the day of `minDate` is picked, moves to the limit; a typed time beyond it marks the field invalid. Until a date is picked, the time selects work on today moved into the limits. A limit without a time of day covers its whole day.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerTimeLimitsExample = () => {
return (
)
}
```
`seconds`, `minutes` and `hours` narrow what the time half offers, and are ignored without `timepicker`. Hours are 0 to 23 in every locale; on a 12-hour clock an hour that only one period allows sets that period.
## With form field
Wrap the control in [``](https://coreui.io/react/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place.
A native reset of the form returns an uncontrolled picker to the date it started with and drops the state a submit set; a controlled one (`date` with `onDateChange`) asks for the date it started with through `onDateChange` and shows the date your page gives until the page takes it.
```html
import React from 'react'
import { CFormField, CFormText } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerFormFieldExample = () => {
return (
Delivery date
We deliver on working days only.
)
}
```
## Cleaner and picker button
The field ends with two buttons: one clears the value, the other opens the calendar. `cleanerIcon` and `pickerIcon` swap their artwork for your own node, `cleaner={false}` leaves the cleaner out, and `pickerIcon={false}` leaves out the button that opens the calendar. Without that button the popup has no pointer opener and nothing reports the expanded state, though the field keeps the keyboard openers listed under [Keyboard support](#keyboard-support).
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
import CIcon from '@coreui/icons-react'
import { cilCalendarCheck, cilXCircle } from '@coreui/icons'
export const DatePickerButtonsExample = () => {
return (
}
defaultDate="2022/08/17"
locale="en-US"
pickerIcon={}
/>
)
}
```
## Floating labels
Set `floatingLabel` and the component wraps its input in `.form-floating` and renders the label itself — the text also becomes the field's accessible name. No wrapper markup is needed, and the mask placeholders stay hidden while the label rests inside the field.
```html
import React from 'react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerFloatingLabelExample = () => (
)
```
Set `floatingLabelAlways` to keep the label [always floating](https://coreui.io/react/docs/forms/floating-labels/#always-floating) with the mask showing.
## Sizing
Set heights using `size` property like `size="lg"` and `size="sm"`.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerSizingExample = () => {
return (
<>
)
}
```
## Disabled
Add the `disabled` boolean attribute on the React Date Picker to give it a grayed out appearance and remove pointer events.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerDisabledExample = () => {
return (
)
}
```
## Readonly
Add the `readOnly` boolean attribute to prevent modification of the field's value. The calendar still opens, so the value can be read but not typed over.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerReadonlyExample = () => {
return (
)
}
```
## 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.
In week, month, quarter and year selection the calendar and the field judge the whole period: it is refused only when it lies wholly before `minDate` or after `maxDate`, or `disabledDates` covers every day of it that the limits leave. In week selection the limits count as whole weeks, so for a week that is all seven days.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
export const DatePickerDisabledDatesExample = () => {
const calendarDate = new Date(2022, 2, 1)
const disabledDates = [
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
new Date(2022, 2, 16),
new Date(2022, 3, 16),
[new Date(2022, 4, 2), new Date(2022, 4, 8)],
]
const maxDate = new Date(2022, 5, 0)
const minDate = new Date(2022, 1, 1)
return (
)
}
```
### Disabling weekends
You can disable weekends by passing a function to the `disabledDates` prop. Here's how to do it:
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDatePicker } from '@coreui/react-pro'
const disableWeekends = (date: Date) => {
const day = date.getDay()
return day === 0 || day === 6 // Disable Sundays (0) and Saturdays (6)
}
export const DatePickerDisablingWeekendsExample = () => {
return (
)
}
```
## Validation
The picker shows its validation state on the frame and on the sections of its field, which the message after the picker describes, the way [``](../validation/) does for a native field. The field keeps its value in a `