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

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

By Posted on

This time I will share jQuery Plugin and tutorial about User-friendly Time Picker Component – tui.time-picker, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 # NPM
2 $ npm install tui-time-picker --save

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

view source
1 // ES 6
2 import {TimePicker} from 'tui-time-picker';

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

view source
1 <link href="/path/to/tui-time-picker.css" rel="stylesheet">
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="/path/to/tui-code-snippet.min.js"></script>
4 <script src="/path/to/tui-time-picker.js"></script>

4. Create placeholders for the time pickers.

view source
1 <div id="timepicker-selectbox"></div>
2 <div id="timepicker-spinbox"></div>

5. Initialize the time pickers and done.

view source
1 var tpSelectbox = new tui.TimePicker('#timepicker-selectbox', {
2     inputType: 'selectbox' // default
3 });
4  
5 var tpSpinbox = new tui.TimePicker('#timepicker-spinbox', {
6     inputType: 'spinbox'
7 });

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
view source
01 {
02   language: 'en',
03   initialHour: 0,
04   initialMinute: 0,
05   showMeridiem: true,
06   inputType: 'selectbox',
07   hourStep: 1,
08   minuteStep: 1,
09   meridiemPosition: 'right',
10   format: 'h:m',
11   disabledHours: [],
12   usageStatistics: true
13 }

7. API methods.

view source
01 // localize text
02 TimePicker.localeTexts['customKey'] = {
03   am: 'a.m.',
04   pm: 'p.m.'
05 };
06  
07 // change language
08 TimePicker.changeLanguage()
09  
10 // destroy the time picker
11 TimePicker.destroy()
12  
13 // get hour
14 TimePicker.getHour()
15  
16 // get step of hour
17 TimePicker.getHourStep()
18  
19 // get minute
20 TimePicker.getMinute()
21  
22 // get step of minute
23 TimePicker.getMinuteStep()
24  
25 // hide the time picker
26 TimePicker.hide()
27  
28 // set hour
29 TimePicker.setHour()
30  
31 // set step of hour
32 TimePicker.setHourStep()
33  
34 // set minute
35 TimePicker.setMinute()
36  
37 // set step of minute
38 TimePicker.setMinuteStep()
39  
40 // set time
41 TimePicker.setTime()
42  
43 // show the time picker
44 TimePicker.show()

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

source : jquery.net

Related posts: