# React Date Range Input Component
> Create a React start and end date field in one frame. Both ends use the section-based mask of the date input, and the range is validated as a whole.
> This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=react&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license.
## Example
_Added in 6.0.0._
The React Date Range Input component is two [date input](../date-input/) fields and a separator in one frame, held together by the range it owns: both ends share the mask and the limits, and an end before the start marks the whole field invalid.
Each end follows the standard React controlled/uncontrolled pattern of its own: use `defaultStartDate` / `defaultEndDate` for an uncontrolled field, or pair `startDate` / `endDate` with `onStartDateChange` / `onEndDateChange` for a controlled one. A native reset of the form puts back the date each end started with, and a controlled end only asks for it through its callback.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputExample = () => {
return (
)
}
```
## Date and time
Set `type="datetime"` and both ends carry the time. The hour cycle follows the locale, and `seconds` adds a seconds section to each field. The range compares its two ends by instant, so an end earlier in the day than the start on the same date marks the field invalid.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputDateTimeExample = () => {
return (
)
}
```
## 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.
```html
import React from 'react'
import { CCol, CFormField, CFormLabel, CFormText, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputFormFieldExample = () => {
return (
Stay
Check-out has to be on or after check-in.
)
}
```
## Formats
Set an explicit mask for both ends with the `format` property. The parser is the [date input's](../date-input/#formats), so dayjs/moment tokens (`DD`, `MM`, `YYYY`) and date-fns/Unicode tokens (`dd`, `MM`, `yyyy`) both work, and any other character becomes a literal separator.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputFormatsExample = () => {
return (
)
}
```
A mask that leaves out sections works here too — a month-and-year range reports the first day of each month:
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputPartialMasksExample = () => {
return (
)
}
```
For picking a whole range on a calendar, use the [date range picker](../date-range-picker/).
## Month names
Use the `MMM` or `MMMM` tokens for text month sections in both ends; typing letters matches a month by prefix. Pass all twelve names through the `monthNames` property to override the locale-derived, date-context grammatical form.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
const POLISH_MONTHS = [
'styczeń',
'luty',
'marzec',
'kwiecień',
'maj',
'czerwiec',
'lipiec',
'sierpień',
'wrzesień',
'październik',
'listopad',
'grudzień',
]
export const DateRangeInputMonthNamesExample = () => {
return (
)
}
```
## Locale
Without an explicit format, both masks follow the locale set via the `locale` property.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputLocalesExample = () => {
return (
)
}
```
## Min and max dates
`minDate` and `maxDate` constrain both ends. A completed date outside the range gets the `.is-invalid` class on its own field and that end reports `null` until the value is corrected.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputMinMaxExample = () => {
return (
)
}
```
## Disabled dates
Beyond a simple range, the `disabledDates` property excludes specific dates from both ends — single `Date`s, `[start, end]` ranges, or a matcher function.
```html
import React from 'react'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputDisabledDatesExample = () => {
return (
date.getDay() === 0 || date.getDay() === 6}
format="dd.MM.yyyy"
label="Business days"
/>
)
}
```
## Custom formats
The built-in token parser covers dayjs, moment, date-fns, and luxon format strings, so you can reuse the format string from the date library you already work with — the library itself isn't required to render or edit the masks. Pair it with `inputDateParse` when you want that library to also parse text pasted into either end, here with `date-fns`:
```html
import React from 'react'
import { parse } from 'date-fns'
import { CCol, CRow } from '@coreui/react'
import { CDateRangeInput } from '@coreui/react-pro'
export const DateRangeInputCustomFormatsExample = () => {
return (
parse(value, 'MMMM dd, yyyy', new Date())}
label="date-fns format"
locale="en-US"
/>
)
}
```
## Validation
The frame shows the state of the range and each field shows its own, the way [``](../validation/) does for a native field. Each end keeps its value in a `