# Bootstrap 6 Date Range Picker
> Create a start and end date field with a multi-month calendar popup. Users type both dates into section-based masks or pick the range from the calendar, with optional predefined ranges.
## Example
### Days
Two masked fields share one input-group frame; the calendar spans two months and
owns the range mechanics — pick a start day and the selection advances to the
end date automatically. Focusing the end field switches the calendar to
end-date selection, the way clicking the end input does in v1.
```html
```
#### With footer
There is no `footer` option — project a ``
child. With a footer present, completing a range does **not** auto-close;
closing is the footer's job.
```html
```
### Weeks
Add `data-coreui-selection-type="week"` to select week ranges, and
`data-coreui-show-week-number="true"` to show week numbers. The fields render
the native `` presentation (`Week 29, 2026`, with a
localized fixed label) — see the [date picker](https://coreui.io/bootstrap/docs/forms/date-picker/#weeks)
note on the ISO week-numbering year.
```html
```
### Months
```html
```
### Quarters
The field masks narrow to quarter and year sections (`Q1 2026`).
```html
```
### Years
```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
Reporting period
Both dates are included in the report.
```
## Floating labels
Each field carries its own [floating label](https://coreui.io/bootstrap/docs/forms/floating-labels/): set `startFloatingLabel` and `endFloatingLabel` and the picker renders a label over each date, floating independently — fill in the check-in date and only its label rises. The label text also becomes the field's accessible name, so the visible and spoken labels stay one thing. No wrapper markup is needed.
```html
```
Add `.form-floating-always` to the component element to keep both labels [always floating](https://coreui.io/bootstrap/docs/forms/floating-labels/#always-floating) with the masks showing.
## Sizing
```html
```
## Disabled
```html
```
## Disabled dates
```html
```
```js
const myDateRangePickerDisabledDates = document.getElementById('myDateRangePickerDisabledDates')
const dateRangePickerDisabledDates = new coreui.DateRangePicker(myDateRangePickerDisabledDates, {
locale: 'en-US',
startDate: new Date(2026, 6, 10),
endDate: new Date(2026, 6, 14),
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, 7, 31)
})
myDateRangePickerDisabledDates.addEventListener('endDateChange.coreui.date-range-picker', event => {
console.log('endDateChange', event.date, event.formattedDate)
})
```
## Validation
The picker takes its validation state the way the [date range input](https://coreui.io/bootstrap/docs/forms/date-range-input/#validation) does: an end before the start makes the frame invalid while it stands and keeps both fields from being drawn valid, and a state you give lands on the frame and on both ends. You give it with the `validationState` option (`'valid'`, `'invalid'` or a state of `$form-validation-states`, with `invalid` and `valid` as deprecated aliases) or with an `.is-invalid` or `.is-valid` class written on the picker element, the server-side route, which is read once, when the picker starts; the option wins over the class. While the given state is `'invalid'`, every section of both fields carries `aria-invalid="true"` and is described by the message after the picker, and both ends block the submit with its text, or `Invalid value.` when there is none.
```html
Those dates are already booked.
```
A given state is a verdict on the range it was given for, so the next change of the range the user makes drops it from both ends and from the picker element: a date picked in the calendar, the cleaner, a button in the footer or among the [custom ranges](#custom-ranges) that changes the range through the context, or typing in either field. An action that leaves the range as it is keeps the state. A change your own code makes, with `setRange()`, `clear()` or `reset()`, keeps it. `setValidationState()` sets it again without rebuilding the picker. A class or an `aria-invalid` written on the picker element after it starts is not read. A native form reset puts back the range the picker started with and drops the state.
### Blocking the submit
A `required` end that is empty, incomplete or rejected by the limits blocks the submit by itself. An end before the start does not, since both ends hold dates the browser accepts, and neither does an optional end that is empty, incomplete or rejected, which submits no date. Check the range in your `submit` listener; `getStartDate()` and `getEndDate()` return `null` for an end that is empty, incomplete or rejected, so one condition covers both:
```js
const element = document.querySelector('#stayRange')
const range = coreui.DateRangePicker.getOrCreateInstance(element)
element.closest('form').addEventListener('submit', event => {
const start = range.getStartDate()
const end = range.getEndDate()
if (!start || !end || end < start) {
event.preventDefault()
}
})
```
## Custom ranges
There is no `ranges` option. Project a ``
child — it renders as a column beside the calendars. Presets take arguments, so
they run through `getContext().setRange()`: the date math, labels, and order are
yours.
```html
```
```js
const myDateRangePickerRanges = document.getElementById('myDateRangePickerRanges')
const dateRangePickerRanges = new coreui.DateRangePicker(myDateRangePickerRanges, {
locale: 'en-US',
startName: 'report-start',
endName: 'report-end'
})
// Projected ranges act through the slot context — labels, order, and the
// date math are userland, the shell only exposes setRange.
const context = () => dateRangePickerRanges.getContext()
const today = new Date()
const presets = {
rangeLast7: () => context().setRange(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6), today),
rangeLast30: () => context().setRange(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 29), today),
rangeThisMonth: () => context().setRange(new Date(today.getFullYear(), today.getMonth(), 1), new Date(today.getFullYear(), today.getMonth() + 1, 0))
}
for (const [id, apply] of Object.entries(presets)) {
myDateRangePickerRanges.querySelector(`#${id}`).addEventListener('click', apply)
}
```
## Locale
### Auto
```html
```
### Chinese
```html
```
### Japanese
```html
```
### Korean
```html
```
## Right to left support
### Hebrew
```html
```
### Persian
The date range picker is Gregorian: with a locale whose own calendar has different months, like Persian, its calendar shows the Gregorian months in that locale's language and digits, and its fields hold Gregorian numbers.
```html
```
The separator between the two fields is a directional arrow, so the component
renders its mirrored counterpart (`separatorIconRtl`) whenever the picker sits
in an RTL context — the document direction or any `dir="rtl"` ancestor.
## Custom formats
The mask of the fields defines the format. Set it with `data-coreui-format`,
forwarded to both fields.
```html
```
## Accessibility
The fields and the popup answer to the [same keys as the date picker](https://coreui.io/bootstrap/docs/forms/date-picker/#keyboard-support): Alt (Option on macOS) + Arrow Down or F4 opens the calendars, Escape closes them and returns focus, and arrows, Home / End, and Page Down / Page Up (with Shift for years) move the focused date.
The picker element is a `role="group"`, so an `aria-labelledby` on it, pointing at the visible label as the example on this page does, names the pair of fields, and an `aria-describedby` on it moves to both fields. Clicking that label, or a `