# Bootstrap 6 Date Input
> Create date fields with a section-based input mask. Users type the day, month, and year in separate sections with automatic navigation and validation — like the native date input, but with full control over the format.
> 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-input` to create a masked date field. The mask is split into day, month, and year sections — click or focus a section and type, use arrow keys to adjust values, and the caret moves to the next section automatically.
By default, the section order and separators are derived from the user's locale, so `12/31/2026` in `en-US` becomes `31.12.2026` in `de-DE` without any configuration.
```html
```
## Date and time
Set `data-coreui-type="datetime"` and the field carries the time as well. The hour cycle follows the locale, so a 12-hour locale gets an AM/PM section and a 24-hour one does not. Everything else on this page applies unchanged: the same typing, the same arrow keys, the same events.
```html
```
Add `data-coreui-seconds="true"` for a seconds section:
```html
```
`data-coreui-type="time"` keeps only the time sections. That is the field [time input](https://coreui.io/bootstrap/docs/forms/time-input/) renders; it reports a change through `timeChange` instead of `dateChange`.
```html
```
A `format` overrides the type, because it names the sections itself. [Date range input](https://coreui.io/bootstrap/docs/forms/date-range-input/) takes both options too, so a range with time is the same two attributes on the range container.
## 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
Delivery date
We deliver on working days only.
```
## Formats
Set an explicit format with the `data-coreui-format` attribute. The parser accepts both dayjs/moment-style tokens (`DD`, `MM`, `YYYY`, `YY`) and date-fns/Unicode-style tokens (`dd`, `MM`, `yyyy`, `yy`), plus `ww` for ISO week numbers and `q` (numeric) or `QQQ` (`Q1`–`Q4`) for quarters, so you can reuse the format strings from the date library you already use. Any other character becomes a literal separator — a fixed, non-editable part of the mask — and text wrapped in single quotes is always a literal, even when it contains token letters (`'Week' ww` renders `Week 29`; escape a quote by doubling it, `''`).
```html
```
Two-digit year sections expand with smart century assignment — values up to 50 years in the future resolve to the current century, older ones to the previous century.
The format doesn't have to include every section — a month-and-year mask works like the native `month` input and reports the first day of the month:
```html
```
Week and quarter masks work the same way. A week mask edits the ISO week directly and reports the Monday of that week; its year section holds the ISO week-numbering year, which can differ from the calendar year around January 1st. Combine a quoted label with the `ww` token for the native week input's presentation, or use `yyyy-Www` (the uppercase `W` is a literal) for the ISO wire format. A quarter mask reports the first day of the quarter:
```html
```
## Month names
Use the `MMM` or `MMMM` tokens for text month sections with localized short or full month names. Type letters to match a month by prefix — `m` selects March, continuing with `may` switches to May — and the caret moves on as soon as the prefix is unambiguous. Digits and arrow keys keep working too.
```html
```
Month names default to the grammatical form used inside a full date — e.g. Polish shows the genitive `14 lipca 2026`, not the standalone `lipiec`. To use a different form (or your own localization), pass all twelve names through the `monthNames` option; they are used for display, letter matching, and paste alike.
```html
```
## Locale
Without an explicit format, the mask follows the locale set via `data-coreui-locale`.
```html
```
## Initial value
Set the initial date with the `data-coreui-date` attribute.
A field holds what its format shows. A date given with a time of day to a field without a time keeps only its day: `getDate()` and `dateChange` report midnight. Use a format with a time when the time matters.
```html
```
## Min and max dates
Constrain the selectable range with `minDate` and `maxDate`. A completed date outside the range gets the `.is-invalid` class and the component reports `null` until the value is corrected. A date field compares the limits by the day. A field with a time compares them to the smallest unit it shows, and there a `maxDate` without a time of day covers its whole day.
```html
```
## Disabled dates
Beyond a simple range, the `disabledDates` option excludes specific dates — single `Date`s, `[start, end]` ranges, or a matcher function. Unlike in the [date picker](https://coreui.io/bootstrap/docs/forms/date-picker/#disabled-dates), there is no calendar to gray out: a completed date that hits a disabled entry gets the `.is-invalid` class and the component reports `null` until the value is corrected.
In this example July 4–7 and July 16 can't be entered — try typing one of them:
```html
```
```js
const myDateInputDisabledDates = document.getElementById('myDateInputDisabledDates')
const optionsDateInputDisabledDates = {
locale: 'en-US',
format: 'dd.MM.yyyy',
date: 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.DateInput(myDateInputDisabledDates, optionsDateInputDisabledDates)
```
### Disabling weekends
Pass a function to disable dates by rule — here Saturdays and Sundays:
```html
```
```js
const myDateInputDisabledDates2 = document.getElementById('myDateInputDisabledDates2')
const optionsDateInputDisabledDates2 = {
disabledDates(date) {
const day = date.getDay()
return day === 0 || day === 6
},
format: 'dd.MM.yyyy',
locale: 'en-US'
}
new coreui.DateInput(myDateInputDisabledDates2, optionsDateInputDisabledDates2)
```
## Custom formats
The built-in token parser covers dayjs, moment, date-fns, and luxon format strings for date masks, 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 mask. Pair it with `inputDateParse` when you want that library to also parse text pasted into the field.
In this example the mask uses the dayjs format `MMMM DD, YYYY`, and dayjs (with the `customParseFormat` plugin) parses pasted strings:
```html
```
```html
```
```js
const myDateInputCustomFormats1 = document.getElementById('myDateInputCustomFormats1')
dayjs.extend(window.dayjs_plugin_customParseFormat)
const optionsDateInputCustomFormats1 = {
locale: 'en-US',
date: new Date(2022, 8, 3),
format: 'MMMM DD, YYYY',
inputDateParse: value => dayjs(value, 'MMMM DD, YYYY', 'en').toDate()
}
new coreui.DateInput(myDateInputCustomFormats1, optionsDateInputCustomFormats1)
```
Localized formats work the same way — the section names come from the component's `locale` (or the `monthNames` option), while the dayjs locale file handles parsing pasted text, here in Spanish:
```html
```
```html
```
```js
const myDateInputCustomFormats2 = document.getElementById('myDateInputCustomFormats2')
dayjs.extend(window.dayjs_plugin_customParseFormat)
dayjs.locale('es')
const optionsDateInputCustomFormats2 = {
locale: 'es-ES',
date: new Date(2022, 8, 3),
format: 'YYYY MMMM DD',
inputDateParse: value => dayjs(value, 'YYYY MMMM DD', 'es').toDate()
}
new coreui.DateInput(myDateInputCustomFormats2, optionsDateInputCustomFormats2)
```
## Validation
The field shows its validation state on the element and on its sections, and links the message that follows it, the way the [form plugin](https://coreui.io/bootstrap/docs/forms/validation/) does for a native field. It keeps its value in a `