CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

Bootstrap 5 Time Picker

Time Picker

Create consistent cross-browser and cross-device time picker.

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

Example

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="en-US" data-coreui-toggle="time-picker" id="timePicker1"></div>
  </div>
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="en-US" data-coreui-time="02:17:35 PM" data-coreui-toggle="time-picker" id="timePicker2"></div>
  </div>
</div>

Sizing

Set heights using data-coreui-size attribute like data-coreui-size="lg" and data-coreui-size="sm".

html

<div class="row mb-4">
  <div class="col-lg-5">
    <div class="time-picker" data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="time-picker"></div>
  </div>
</div>
<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="en-US" data-coreui-size="sm" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Disabled

Add the data-coreui-disabled="true" attribute on an input to give it a grayed out appearance and remove pointer events.

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-disabled="true" data-coreui-locale="en-US" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Readonly

Add the data-coreui-input-read-only="true" boolean attribute to prevent modification of the input’s value.

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-input-read-only="true" data-coreui-locale="en-US" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Non-english locale

Auto

html

<div class="row">
  <div class="col-lg-4">
    <div data-coreui-toggle="time-picker"></div>
  </div>
</div>

Chinese

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="zh-CN" data-coreui-placeholder="入住日期" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Japanese

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="ja" data-coreui-placeholder="日付を選択" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Korean

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="ko" data-coreui-placeholder="날짜 선택" data-coreui-toggle="time-picker"></div>
  </div>
</div>

Right to left support

RTL support is built-in and can be explicitly controlled through the $enable-rtl variables in scss.

Hebrew

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="he-IL" data-coreui-placeholder="בחר תאריך" data-coreui-toggle="time-picker" dir="rtl"></div>
  </div>
</div>

Persian

html

<div class="row">
  <div class="col-lg-4">
    <div class="time-picker" data-coreui-locale="fa-IR" data-coreui-placeholder="تاریخ شروع" data-coreui-toggle="time-picker" dir="rtl"></div>
  </div>
</div>

Usage

Via data attributes

Add data-coreui-toggle="time-picker" to a div element.

<div data-coreui-toggle="time-picker"></div>

Via JavaScript

Call the time picker via JavaScript:

<div class="time-picker"></div>

const timePickerElementList = Array.prototype.slice.call(document.querySelectorAll('.time-picker'))
const timePickerList = timePickerElementList.map(timePickerEl => {
  return new coreui.TimePicker(timePickerEl)
})

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-coreui-, as in data-coreui-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-coreui-custom-class="beautifier" instead of data-coreui-customClass="beautifier".

As of CoreUI 4.2.0, all components support an experimental reserved data attribute data-coreui-config that can house simple component configuration as a JSON string. When an element has data-coreui-config='{"delay":0, "title":123}' and data-coreui-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-coreui-config. In addition, existing data attributes are able to house JSON values like data-coreui-delay='{"show":0,"hide":150}'.

Name	Type	Default	Description
`cancelButtonLabel`	string	`'Cancel'`	Cancel button inner HTML
`cancelButtonClasses`	array \| string	`['btn', 'btn-sm', 'btn-ghost-primary']`	CSS class names that will be added to the cancel button
`cleaner`	boolean	`true`	Enables selection cleaner element.
`confirmButtonLabel`	string	`'OK'`	Confirm button inner HTML
`confirmButtonClasses`	array \| string	`['btn', 'btn-sm', 'btn-primary']`	CSS class names that will be added to the confirm button
`container`	string	`'dropdown'`	Set container type for the component. `'dropdown'` `'inline'`
`disabled`	boolean	`false`	Toggle the disabled state for the component.
`indicator`	boolean	`true`	Toggle visibility or set the content of the input indicator.
`inputReadOnly`	boolean	`false`	Toggle the readonly state for the component.
`invalid`	boolean	`false`	Toggle the invalid state for the component.
`locale`	string	`'default'`	Sets the default locale for components. If not set, it is inherited from the navigator.language.
`placeholder`	string	`'Select time'`	Specifies a short hint that is visible in the input.
`size`	`'sm'` \| `'lg'`	`null`	Size the component small or large.
`time`	date \| string \| null	`null`	Default value of the component
`valid`	boolean	`false`	Toggle the valid state for the component.
`variant`	`'inline'` \| `'roll'`	`'roll'`	Set the time picker variant to a roll or select.

Methods

Method	Description
`clear`	Clear selection of the time picker.
`reset`	Reset selection of the time picker to the initial value.
`update`	Updates the configuration of the time picker.
`dispose`	Destroys a component. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the time picker instance associated to a DOM element, you can use it like this: `coreui.TimePicker.getInstance(element)`
`getOrCreateInstance`	Static method which returns a time picker instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `coreui.TimePicker.getOrCreateInstance(element)`

Events

Method	Description
`timeChange.coreui.time-picker`	Callback fired when the value changed.
`show.coreui.dropdown`	Fires immediately when the show instance method is called.
`shown.coreui.dropdown`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.
`hide.coreui.dropdown`	Fires immediately when the hide instance method has been called.
`hidden.coreui.dropdown`	Fired when the dropdown has finished being hidden from the user and CSS transitions have completed.

const myTimePicker = document.getElementById('myTimePicker')
myTimePicker.addEventListener('timeChange.coreui.time-picker', (timeString, localeTimeString, date) => {
  // do something...
})

Customizing

CSS variables

TimePickers use local CSS variables on .time-picker for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

scss/_time-picker.scss

--#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};
--#{$prefix}time-picker-roll-col-border: #{$time-picker-roll-col-border-width} solid #{$time-picker-roll-col-border-color};

SASS variables

scss/_variables.scss

$time-picker-default-icon-color:       $gray-600;
$time-picker-default-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-default-icon-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$time-picker-default-icon-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>");
$time-picker-invalid-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-invalid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-invalid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>");
$time-picker-valid-icon:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$form-feedback-valid-color}' points='271.514 95.5 239.514 95.5 239.514 273.611 355.127 328.559 368.864 299.657 271.514 253.389 271.514 95.5' class='ci-primary'></polygon><path fill='#{$form-feedback-valid-color}' d='M256,16C123.452,16,16,123.452,16,256S123.452,496,256,496,496,388.548,496,256,388.548,16,256,16Zm0,448C141.125,464,48,370.875,48,256S141.125,48,256,48s208,93.125,208,208S370.875,464,256,464Z' class='ci-primary'></path></svg>");

$time-picker-cleaner-icon-color:       $gray-600;
$time-picker-cleaner-icon:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z' class='ci-primary'></path></svg>");
$time-picker-cleaner-icon-hover-color: $body-color;
$time-picker-cleaner-icon-hover:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#{$time-picker-cleaner-icon-hover-color}' points='348.071 141.302 260.308 229.065 172.545 141.302 149.917 163.929 237.681 251.692 149.917 339.456 172.545 362.083 260.308 274.32 348.071 362.083 370.699 339.456 282.935 251.692 370.699 163.929 348.071 141.302' class='ci-primary'></polygon><path fill='#{$time-picker-cleaner-icon-hover-color}' d='M425.706,86.294A240,240,0,0,0,86.294,425.706,240,240,0,0,0,425.706,86.294ZM256,464C141.309,464,48,370.691,48,256S141.309,48,256,48s208,93.309,208,208S370.691,464,256,464Z' class='ci-primary'></path></svg>");

$time-picker-body-padding:             $spacer * .5;
$time-picker-roll-col-border-width:    1px;
$time-picker-roll-col-border-color:    var(--#{$prefix}border-color);