# Bootstrap 6 Time Picker
> Create a time field with a popup. Users type the time into a section-based mask or pick it from the rolls, and the two stay in sync.
> 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
Type into the masked field or pick from the roll. The two halves share one
value, so typing and picking stay in sync.
```html
```
### Theme variants
A [`.theme-*` class](https://coreui.io/bootstrap/docs/customize/components/#theme-variants) on the picker colours the selected cell of every roll.
```html
```
### With footer
There is no `footer` option — project a ``
child. Buttons act through `data-coreui-picker-action` (`now`, `clear`, `reset`,
`close`).
```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
Meeting time
Local time, in your own time zone.
```
## Floating labels
The time picker supports [floating labels](https://coreui.io/bootstrap/docs/forms/floating-labels/): set `floatingLabel` and the component renders the label itself — no wrapper markup needed — and the text also becomes the field's accessible name. The mask placeholders stay hidden while the label rests inside the field; focusing any part of the field — the sections or the picker button — floats the label and reveals the mask.
```html
```
Add `.form-floating-always` to the component element to keep the label [always floating](https://coreui.io/bootstrap/docs/forms/floating-labels/#always-floating) with the mask showing.
## Sizing
```html
```
## Disabled
```html
```
## Min and max times
Constrain the times the user can pick with `minDate` and `maxDate`, given as time strings like `09:30` or as dates, of which only the time of day counts. The panel disables the hours that hold no allowed time and, once an hour is chosen, the minutes and seconds outside the range, and a time picked in the panel that crosses a limit moves to it. A time typed in the field outside the range gets the `.is-invalid` class, the picker reports `null` and submits no time until the value is corrected. A `maxDate` at midnight covers the whole day; any other `maxDate` before the `minDate` leaves no time to pick. The limits also apply when you give them through `inputOptions`.
```html
```
## Validation
The picker takes its validation state [the way the date picker does](https://coreui.io/bootstrap/docs/forms/date-picker/#validation): the `validationState` option (with `invalid` and `valid` as deprecated aliases) or an `.is-invalid` or `.is-valid` class written on the picker element, read once when the picker starts. A given state drops on the next change of the time the user makes, a time picked in the panel, the cleaner, a footer button that changes the time through the context, or typing in the field, and stays through `setTime()`, `clear()`, `reset()` and `now()` called by your code. `setValidationState()` sets it again. While the given state is `'invalid'`, the sections of the field carry `aria-invalid="true"`, are described by the message after the picker, and the picker blocks the submit with its text, or `Invalid value.` when there is none.
```html
The room is taken at this time.
```
## Custom formats
### Disable minutes and seconds
```html
```
### Custom hours, minutes and seconds
Pass a list or a filter function through `hours`, `minutes`, and `seconds`. Hours are 0 to 23 in every locale. On a 12-hour clock the column still lists 1 to 12 next to AM/PM: picking an hour that only one period allows sets that period, and the period the picked hour does not allow is disabled, so the example below offers 8 AM to 4 PM.
```js
const picker = new coreui.TimePicker(element, {
locale: 'en-US',
hours: [8, 9, 10, 11, 12, 13, 14, 15, 16],
minutes: minute => minute % 15 === 0,
seconds: false
})
```
## Locale
The locale decides whether the field and the time columns use a 12-hour or a 24-hour clock, and names the day periods in its own words, 오전 and 오후 in Korean. A `format` pins the clock in every locale, `'HH:mm'` for 24 hours and `'hh:mm a'` for 12.
### Auto
```html
```
### Chinese
```html
```
### Japanese
```html
```
### Korean
```html
```
## Right to left support
### Hebrew
```html
```
### Persian
```html
```
## Accessibility
The toggle button carries the panel's state — `aria-haspopup="dialog"`, `aria-controls` pointing at the popup while it is open, and `aria-expanded` tracking whether it is open — so a screen reader announces what the button does and whether the panel is showing. The panel itself is a `dialog` with `aria-modal`, so focus moves into it on open, stays there while it is open, and returns to the field when it closes. The field itself is a [time input](https://coreui.io/bootstrap/docs/forms/time-input/#accessibility), a group of spinbutton sections, so its arrow keys belong to the value and the popup opens on the native dropdown keys.
Clicking a label that names the field, through `aria-labelledby` or a `