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

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. 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.

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.

<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
var tpSpinbox = new tui.TimePicker('#timepicker-spinbox', {
    inputType: 'spinbox'

6. Possible 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
  • 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: [],
  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

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

  • Publication date: 26.07.2018
  • Source