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.

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.
`name`	string	`null`	Set the name attribute for the input element.
`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.time-picker`	Fires immediately when the show instance method is called.
`shown.coreui.time-picker`	Fired when the dropdown has been made visible to the user and CSS transitions have completed.
`hide.coreui.time-picker`	Fires immediately when the hide instance method has been called.
`hidden.coreui.time-picker`	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-zindex: #{$time-picker-zindex};
--#{$prefix}time-picker-font-family: #{$time-picker-font-family};
--#{$prefix}time-picker-font-size: #{$time-picker-font-size};
--#{$prefix}time-picker-font-weight: #{$time-picker-font-weight};
--#{$prefix}time-picker-line-height: #{$time-picker-line-height};
--#{$prefix}time-picker-color: #{$time-picker-color};
--#{$prefix}time-picker-bg: #{$time-picker-bg};
--#{$prefix}time-picker-box-shadow: #{$time-picker-box-shadow};
--#{$prefix}time-picker-border-width: #{$time-picker-border-width};
--#{$prefix}time-picker-border-color: #{$time-picker-border-color};
--#{$prefix}time-picker-border-radius: #{$time-picker-border-radius};
--#{$prefix}time-picker-disabled-color: #{$time-picker-disabled-color};
--#{$prefix}time-picker-disabled-bg: #{$time-picker-disabled-bg};
--#{$prefix}time-picker-disabled-border-color: #{$time-picker-disabled-border-color};
--#{$prefix}time-picker-focus-color: #{$time-picker-focus-color};
--#{$prefix}time-picker-focus-bg: #{$time-picker-focus-bg};
--#{$prefix}time-picker-focus-border-color: #{$time-picker-focus-border-color};
--#{$prefix}time-picker-focus-box-shadow: #{$time-picker-focus-box-shadow};
--#{$prefix}time-picker-placeholder-color: #{$time-picker-placeholder-color};
--#{$prefix}time-picker-padding-y: #{$time-picker-padding-y};
--#{$prefix}time-picker-padding-x: #{$time-picker-padding-x};
--#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};
--#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};
--#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};
--#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};
--#{$prefix}time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};
--#{$prefix}time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};
--#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};
--#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};
--#{$prefix}time-picker-footer-border-width: #{$time-picker-footer-border-width};
--#{$prefix}time-picker-footer-border-color: #{$time-picker-footer-border-color};
--#{$prefix}time-picker-footer-padding: #{$time-picker-footer-padding};
--#{$prefix}time-picker-dropdown-bg: #{$time-picker-dropdown-bg};
--#{$prefix}time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};
--#{$prefix}time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};
--#{$prefix}time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};
--#{$prefix}time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};
--#{$prefix}time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};
--#{$prefix}time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};
--#{$prefix}time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};
--#{$prefix}time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};
--#{$prefix}time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};
--#{$prefix}time-picker-inline-select-color: #{$time-picker-inline-select-color};
--#{$prefix}time-picker-inline-select-padding-y: #{$time-picker-inline-select-padding-y};
--#{$prefix}time-picker-inline-select-padding-x: #{$time-picker-inline-select-padding-x};
--#{$prefix}time-picker-inline-select-disabled-color: #{$time-picker-inline-select-disabled-color};

SASS variables

scss/_variables.scss

$time-picker-zindex:                        1000;
$time-picker-font-family:                   $input-font-family;
$time-picker-font-size:                     $input-font-size;
$time-picker-font-weight:                   $input-font-weight;
$time-picker-line-height:                   $input-line-height;
$time-picker-color:                         $input-color;
$time-picker-bg:                            $input-bg;
$time-picker-box-shadow:                    $box-shadow-inset;

$time-picker-border-width:                  $input-border-width;
$time-picker-border-color:                  $input-border-color;
$time-picker-border-radius:                 $input-border-radius;
$time-picker-border-radius-sm:              $input-border-radius-sm;
$time-picker-border-radius-lg:              $input-border-radius-lg;

$time-picker-invalid-border-color:          var(--#{$prefix}form-invalid-border-color);
$time-picker-valid-border-color:            var(--#{$prefix}form-valid-border-color);

$time-picker-disabled-color:                $input-disabled-color;
$time-picker-disabled-bg:                   $input-disabled-bg;
$time-picker-disabled-border-color:         $input-disabled-border-color;

$time-picker-focus-color:                   $input-focus-color;
$time-picker-focus-bg:                      $input-focus-bg;
$time-picker-focus-border-color:            $input-focus-border-color;
$time-picker-focus-box-shadow:              $input-btn-focus-box-shadow;

$time-picker-placeholder-color:             var(--#{$prefix}secondary-color);

$time-picker-padding-y:                     $input-padding-y;
$time-picker-padding-x:                     $input-padding-x;
$time-picker-padding-y-sm:                  $input-padding-y-sm;
$time-picker-padding-x-sm:                  $input-padding-x-sm;
$time-picker-padding-y-lg:                  $input-padding-y-lg;
$time-picker-padding-x-lg:                  $input-padding-x-lg;

$time-picker-cleaner-icon-color:            var(--#{$prefix}tertiary-color);
$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='#000' 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'></polygon><path fill='#000' 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'></path></svg>");
$time-picker-cleaner-icon-hover-color:      var(--#{$prefix}body-color);
$time-picker-cleaner-icon-size:             1rem;
$time-picker-cleaner-icon-size-sm:          .875rem;
$time-picker-cleaner-icon-size-lg:          1.25rem;

$time-picker-indicator-icon-color:          var(--#{$prefix}tertiary-color);
$time-picker-indicator-icon:                url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' role='img'><polygon fill='#000' 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'></polygon><path fill='#000' 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'></path></svg>");
$time-picker-indicator-invalid-icon-color:  var(--#{$prefix}form-invalid-color);
$time-picker-indicator-invalid-icon:        $time-picker-indicator-icon;
$time-picker-indicator-valid-icon-color:    var(--#{$prefix}form-valid-color);
$time-picker-indicator-valid-icon:          $time-picker-indicator-icon;
$time-picker-indicator-icon-size:           1rem;
$time-picker-indicator-icon-size-sm:        .875rem;
$time-picker-indicator-icon-size-lg:        1.25rem;

$time-picker-dropdown-bg:                   var(--#{$prefix}body-bg);
$time-picker-dropdown-border-color:         var(--#{$prefix}border-color);
$time-picker-dropdown-border-width:         var(--#{$prefix}border-width);
$time-picker-dropdown-border-radius:        var(--#{$prefix}border-radius);
$time-picker-dropdown-box-shadow:        var(--#{$prefix}box-shadow);

$time-picker-body-padding:                  $spacer * .5;

$time-picker-footer-padding:                .5rem;
$time-picker-footer-border-width:           1px;
$time-picker-footer-border-color:           var(--#{$prefix}border-color);

$time-picker-roll-col-border-width:         var(--#{$prefix}border-width);
$time-picker-roll-col-border-color:         var(--#{$prefix}border-color);
$time-picker-roll-cell-selected-color:      var(--#{$prefix}white);
$time-picker-roll-cell-selected-bg:         var(--#{$prefix}primary);

$time-picker-inline-select-font-size:       $form-select-font-size-sm;
$time-picker-inline-select-color:           $input-color;
$time-picker-inline-select-padding-y:       $input-padding-y-sm;
$time-picker-inline-select-padding-x:       $input-padding-x-sm;
$time-picker-inline-select-disabled-color:  $input-disabled-color;