# Bootstrap 6 Date Picker
> Create a date field with a calendar popup. Users type the date into a section-based mask or pick it from the calendar, and the two stay in sync.
## Example
Below is an example of a basic Date Picker.
### Days
The input is a section-based mask — type the date directly, adjust a section
with the arrow keys, or pick a day from the calendar. There is no free-text
parsing and no debounce: the field always holds a valid partial date.
```html
```
#### With footer
There is no `footer` option. Project a ``
child instead — its content is cloned into the dropdown. Buttons act through
`data-coreui-picker-action` (`today`, `clear`, `reset`, `close`), so labels,
order, and translations are yours. A button opting into the `today` action
opts into its state too: it is disabled at initialization when today falls
outside `minDate`/`maxDate`/`disabledDates`. This is one-way — the picker only
ever sets `disabled`, so a button you disable in the template stays disabled.
```html
```
Here `maxDate` is the end of last month, so the `today` button disables
itself. The state of any other button is yours — the slot context exposes
`isDateSelectable(date)`, which answers whether a date, expressed in the
field's mask, passes the `minDate`/`maxDate`/`disabledDates` validation (a day
mask checks the calendar day, so `new Date()` passes with a `maxDate` of
today, and a month, quarter or year mask checks the whole period) — and every
programmatic date still runs through the field's
validation: out of range, the field turns `is-invalid`, `errorChange` reports
the reason, and `getDate()` reports `null`, the same outcome as typing that
date. `setDate()` fires no `dateChange`; an action such as `today` fires it
with `null`.
```html
```
```js
const myDatePickerFooterToday = document.getElementById('myDatePickerFooterToday')
const datePickerFooterToday = new coreui.DatePicker(myDatePickerFooterToday, {
locale: 'en-US',
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), 0)
})
```
### Weeks
Add `data-coreui-selection-type="week"` to select week numbers, and
`data-coreui-show-week-number="true"` to show them in the grid. The field
renders the native `` presentation — a fixed, non-editable
localized label followed by the week and year sections (`Week 29, 2026`,
`Tydzień 29, 2026`, …). The year is the ISO week-numbering year, which can
differ from the calendar year around January 1st, and the reported `Date` is
the Monday of the selected week. Prefer the ISO wire format in the field?
Set `data-coreui-format="yyyy-Www"`.
```html
```
### Months
Add `data-coreui-selection-type="month"` to select months. The field mask
narrows to month and year automatically.
```html
```
### Quarters
Add `data-coreui-selection-type="quarter"` to select quarters — the equivalent
of the `` that HTML never shipped. The field mask narrows
to a quarter and year section (`Q4 2026`), and the reported `Date` is the
first day of the selected quarter.
```html
```
### Years
Add `data-coreui-selection-type="year"` to select years. The field mask narrows
to the year automatically.
```html
```
## 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
```
`hours`, `minutes` and `seconds` 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. The four `ariaSelect*Label` options name its
selects, and with the flag on the field actions call themselves "Clear date and
time" and "Toggle calendar and time selection" unless the page passed its own
label.
`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
```
## 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.
```
## Composing the markup
The picker is built from other components — the [date input](https://coreui.io/bootstrap/docs/forms/date-input/) field, the [calendar](https://coreui.io/bootstrap/docs/components/calendar/) and a popup — held together by the date it owns. The markup is where you choose the parts: mark an element with a role attribute and the picker adopts it instead of building its own; leave a part out and it is generated as in the examples above.
| Role | Element | What the picker does with it |
| --- | --- | --- |
| `data-coreui-picker-field` | a `div` | Hosts the date input's sections. Without it the field is generated (and wrapped in `.form-floating` when `floatingLabel` is set). |
| `data-coreui-picker-toggle` | a `button` or any element | Opens and closes the calendar. Gets `aria-expanded` and `aria-haspopup`, and `aria-controls` while the calendar is open, and `ariaPickerLabel` as its name unless it has one or shows text of its own. |
| `data-coreui-picker-cleaner` | a `button` | Clears the value. Gets `ariaCleanerLabel` as its name unless it has one or shows text of its own. |
A decorative `