User-friendly Time Picker Component - tui.time-picker

File Size: 40.1 KB
Views Total: 11637
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
User-friendly Time Picker Component - tui.time-picker

tui.time-picker is a minimal, user-friendly, multi-language time picker component written/implemented in jQuery or Vanilla JavaScript. Supports ante meridiem (AM) and post meridiem (PM).

The plugin provides 2 ways to select times:

  • Selectbox: Select hours/minutes from select dropdowns.
  • Pinbox: Select hours/minutes by clicking the increment/decrement buttons.

See Also:

How to use it:

1. Download & Install the tui.time-picker package via NPM.

$ npm install tui-time-picker --save

2. Import the the tui.time-picker component.

// ES 6
import TimePicker from 'tui-time-picker';

3. Or include the compiled version of the tui.time-picker library on the webpage.

<!-- Vanilla JS Version (2.x) -->
<link href="/path/to/tui-time-picker.css" rel="stylesheet">
<script src="/path/to/tui-time-picker.js"></script>

<!-- jQuery Version (1.x) -->
<link href="/path/to/tui-time-picker.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/tui-code-snippet.min.js"></script>
<script src="/path/to/tui-time-picker.js"></script>

4. Create placeholders for the time pickers.

<div id="timepicker-selectbox"></div>
<div id="timepicker-spinbox"></div>

5. Initialize the time pickers and done.

var tpSelectbox = new tui.TimePicker('#timepicker-selectbox', {
    inputType: 'selectbox' // default
    // more options here

var tpSpinbox = new tui.TimePicker('#timepicker-spinbox', {
    inputType: 'spinbox',
    // more options here

6. Full plugin options to customize your time picker.

  • initialHour: initial hour
  • initialMinute: initial minute
  • hourStep: step value of hour
  • minuteStep: step value of minute
  • inputType: 'selectbox' or 'spinbox'
  • format: custom time format
  • showMeridiem: shows AM/PM
  • disabledHours: an array of disabled hours
  • disabledMinutes: an object of disabled minutes
  • meridiemPosition: 'right' or 'left'
  • language: sets locale texts
  • usageStatistics: send hostname to google analytics
  language: 'en',
  initialHour: 0,
  initialMinute: 0,
  showMeridiem: true,
  inputType: 'selectbox',
  hourStep: 1,
  minuteStep: 1,
  meridiemPosition: 'right',
  format: 'h:m',
  disabledHours: [],
  disabledMinutes: {},
  usageStatistics: true

7. API methods.

// localize text
TimePicker.localeTexts['customKey'] = {
  am: 'a.m.',
  pm: 'p.m.'

// change language

// destroy the time picker

// get hour

// get step of hour

// get minute

// get step of minute

// hide the time picker

// set hour

// set step of hour

// set minute

// set step of minute

// set time

// show the time picker

// set selectable range
TimePicker.setRange(begin, end)

// reset range

8. Trigger a function every time the time changes.

TimePicker.on('change', (e) =>{
  console.log(e.hour, e.minute)


v2.1.6 (2023-01-03)

  • Fix: minute set to non-selectable minutes when changing selectable range

v2.1.5 (2022-11-23)

  • Feat: add silent option on settime api for preventing firing change event
  • Bugfix

v2.1.4 (2021-09-17)

  • Fix: set wrong time when setting time range if use time step

This awesome jQuery plugin is developed by nhnent. For more Advanced Usages, please check the demo page or visit the official website.