# Bootstrap 6 Date Range Input
> Create a 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=bootstrap&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._
Use an empty container with `data-coreui-date-range-input` to create a range field. It is two [date inputs](https://coreui.io/bootstrap/docs/forms/date-input/) — start and end — and a separator in one frame, held together by the range the component owns: both ends share the mask and the limits, and an end before the start marks the whole field invalid.
```html
```
## Date and time
`data-coreui-type="datetime"` puts the time on both ends, and `data-coreui-seconds="true"` adds a seconds section. The range compares the two ends by instant, so an end earlier in the day than the start on the same date marks the field invalid.
```html
```
## With form field
Wrap the control in [`.form-field`](https://coreui.io/bootstrap/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place.
```html
Stay
Check-out has to be on or after check-in.
```
## Formats
Set an explicit mask for both ends with the `data-coreui-format` attribute. The parser is the [date input's](https://coreui.io/bootstrap/docs/forms/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
```
A mask that leaves out sections works here too — a month-and-year range reports the first day of each month:
```html
```
## 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 `monthNames` to override the locale-derived, date-context grammatical form.
```html
```
## Locale
Without an explicit format, both masks follow the locale set via `data-coreui-locale`.
```html
```
## Initial value
Seed either end with `data-coreui-start-date` and `data-coreui-end-date`; a string is parsed like a typed value.
```html
```
## 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
```
## Disabled dates
Beyond a simple range, `disabledDates` excludes specific dates from both ends — single `Date`s, `[start, end]` ranges, or a matcher function. As in the [date input](https://coreui.io/bootstrap/docs/forms/date-input/#disabled-dates), a completed date that hits a disabled entry gets `.is-invalid` and that end reports `null`.
In this example July 4–7 and July 16 can't be entered — try typing one of them:
```html
```
```js
const myDateRangeInputDisabledDates = document.getElementById('myDateRangeInputDisabledDates')
const optionsDateRangeInputDisabledDates = {
locale: 'en-US',
format: 'dd.MM.yyyy',
startDate: new Date(2026, 6, 10),
disabledDates: [
[new Date(2026, 6, 4), new Date(2026, 6, 7)],
new Date(2026, 6, 16)
],
minDate: new Date(2026, 6, 1),
maxDate: new Date(2026, 6, 31)
}
new coreui.DateRangeInput(myDateRangeInputDisabledDates, optionsDateRangeInputDisabledDates)
```
### Disabling weekends
Pass a function to disable dates by rule — here Saturdays and Sundays, on both ends:
```html
```
```js
const myDateRangeInputDisabledDates2 = document.getElementById('myDateRangeInputDisabledDates2')
const optionsDateRangeInputDisabledDates2 = {
disabledDates(date) {
const day = date.getDay()
return day === 0 || day === 6
},
format: 'dd.MM.yyyy',
locale: 'en-US'
}
new coreui.DateRangeInput(myDateRangeInputDisabledDates2, optionsDateRangeInputDisabledDates2)
```
## Custom formats
The 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.
```html
```
```html
```
```js
const myDateRangeInputCustomFormats = document.getElementById('myDateRangeInputCustomFormats')
dayjs.extend(window.dayjs_plugin_customParseFormat)
const optionsDateRangeInputCustomFormats = {
locale: 'en-US',
startDate: new Date(2026, 6, 14),
endDate: new Date(2026, 6, 20),
format: 'MMMM DD, YYYY',
inputDateParse: value => dayjs(value, 'MMMM DD, YYYY', 'en').toDate()
}
new coreui.DateRangeInput(myDateRangeInputCustomFormats, optionsDateRangeInputCustomFormats)
```
## Validation
The frame shows the state of the range and each field shows its own, the way the [form plugin](https://coreui.io/bootstrap/docs/forms/validation/) does for a native field. Each end keeps its value in a `