Minimal jQuery Time Picker Plugin with jQuery TimePicki - Download Minimal jQuery Time Picker Plugin with jQuery - TimePicki

Download Minimal jQuery Time Picker Plugin with jQuery – TimePicki

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal jQuery Time Picker Plugin with jQuery – TimePicki, hope it will help you in programming stack.

Minimal jQuery Time Picker Plugin with jQuery TimePicki - Download Minimal jQuery Time Picker Plugin with jQuery - TimePicki
File Size: 114 KB
Views Total: 24480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

TimePicki is a really simple jQuery plugin that displays an user-friendly time picker upon selection of an html input text field.

How to use it:

1. Include the jQuery timepicki plugin after you’ve added jQuery library on the web page.

view source
1 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
2 <script src="js/timepicki.js">

2. Create a text field for the time picker.

view source
1 <input type="text" name="time">

3. Initialize the plugin. By default, the plugin will display the current time as you click on the time input.

view source
1 $("input").timepicki();

4. The default CSS to style the time picker. You can change or override them to create your own styles.

view source
01 .ti_tx,
02 .mi_tx,
03 .mer_tx {
04   width: 100%;
05   text-align: center;
06   margin: 10px 0;
07 }
08  
09 .time,
10 .mins,
11 .meridian {
12   width: 60px;
13   float: left;
14   margin: 0px 10px;
15   font-size: 20px;
16   color: #2d2e2e;
17   font-family: 'arial';
18   font-weight: 700;
19 }
20  
21 .prev,
22 .next {
23   cursor: pointer;
24   padding: 18px;
25   width: 28%;
26   border: 1px solid #ccc;
27   margin: auto;
28   background: url(../images/arrow.png) no-repeat;
29   border-radius: 5px;
30 }
31  
32 .next { background-position: 50% 150%; }
33  
34 .prev { background-position: 50% -50%; }
35  
36 .time_pick { position: relative; }
37  
38 /*input{ float:left;}*/
39  
40 .timepicker_wrap {
41   padding: 10px;
42   border-radius: 5px;
43   z-index: 2;
44   display: none;
45   width: 240px;
46   box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.35);
47   background: #f6f6f6;
48   border: 1px solid #ccc;
49   float: left;
50   position: absolute;
51   top: 27px;
52   left: 0px;
53 }
54  
55 .arrow_top {
56   position: absolute;
57   top: -10px;
58   left: 20px;
59   background: url(../images/top_arr.png) no-repeat;
60   width: 18px;
61   height: 10px;
62   z-index: 3;
63 }

5. Available options with default values.

view source
01 increase_direction: 'up',
02 custom_classes: '',
03 min_hour_value: 1,
04 max_hour_value: 12,
05 show_meridian: true,
06 step_size_hours: '1',
07 step_size_minutes: '1',
08 overflow_minutes: false,
09 disable_keyboard_mobile: false,
10 reset: false,
11 on_change: null,
12 input_writable: false

Changelog:

2018-08-05

  • fix issue with clicking off timepicki when element is not an input on mobile devices

2017-07-21

  • added input focus feature

2016-01-27

  • Added facility for on_change callback function

2014-12-27

  • add reset option.

2014-12-14

  • v2.0

2014-12-04

  • formatted JS and CSS and added ability for dev to specify which arrows go up or down and a function to format the output

2014-09-22

  • Update timepicki.css

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

source : jquery.net

Related posts: