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

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

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.

How to use it:

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

# 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
TimePicker.changeLanguage()

// destroy the time picker
TimePicker.destroy()

// get hour
TimePicker.getHour()

// get step of hour
TimePicker.getHourStep()

// get minute
TimePicker.getMinute()

// get step of minute
TimePicker.getMinuteStep()

// hide the time picker
TimePicker.hide()

// set hour
TimePicker.setHour()

// set step of hour
TimePicker.setHourStep()

// set minute
TimePicker.setMinute()

// set step of minute
TimePicker.setMinuteStep()

// set time
TimePicker.setTime()

// show the time picker
TimePicker.show()

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