Get it!
Download linkIt`s also available in bower. Install with command bower install timepicker.dial
Usage
- Link timepicker.js and timepicker.css to your project
- Use the .timePicker(); method to connect timepiker to element. Caution! The element must be Input type=text or contain a child input
- (optional) Set picker options using the properties of .timePicker method or data-* HTML5 attributes
For more details, see examples and options below
Options
| Option | Default | Available | Description |
|---|---|---|---|
| time | 06:00 | Default time | |
| autohide | false | true false |
Hide and paste data into input after choosing the minutes |
| autotoggle | true | true false |
Auto toggle view to minutes when hour is select |
| enable_buttons | true | true false |
Enable or Disable buttons |
| always_show | false | true false |
Show timepicker automaticaly and disable hide |
| twelve_hour | false | true false |
Use 12-hour time format |
| position | bottom | top bottom left right |
Default timepicker position |
| float | center | center top bottom left right |
Specify the edge of the element which bind picker |
| margin | 15 | Timepicker margin | |
| theme | light | light dark |
Color theme of timepicker |
| done_text | 'Done' | Set Done button text | |
| done_cancel | 'Cancel' | Set Cancel button text |
Manual actions
Note! If picker not created, function call will create picker. Not use remove() function twice to avoid problems
| Function | Description |
|---|---|
| show() | Show TimePicker |
| hide() | Hide TimePicker |
| destroy() | Destroy TimePicker. Removes all objects, data and layout |
| toggleView(view) | Available view: ('toggle','auto','hour','minute'). 'toggle' change between hour and minutes, 'auto' call done after minute select. |
| position() | Auto adjust timepicker position |
Callbacks
| Callback | Description |
|---|---|
| beforeShow | Before Show |
| afterShow | After Show |
| afterHide | After Hide |
| afterDone | After Done |
| beforeToggleView | Before choose hour or minutes |
| afterToggleView | After choose hour or minutes |
| beforeDestroy | Before remove timepicker |
| afterDestroy | After remove timepicker |
Examples
Default picker, no options
Default: position: bottom, float: center, theme: light, 24-hour view, buttons enabled, autohide disabled, autoshow disabled
<script>
$('#tp-default').timePicker();
</script>
<div id="tp-default">
<input type="text" placeholder="Select time.." />
</div>
Options in data-*, 12-Hour format, Now in default time, Dark theme
Position: right, float: top, theme: dark, 12-hour view
<script>
$('#tp-dark').timePicker();
</script>
<div id="tp-dark" data-time="now" data-theme="dark" data-position="right" data-float="top" data-twelve_hour="true" >
<input type="text" placeholder="Select time.." />
</div>
Options in JS, no buttons
Position: left, float: bottom, 24-hour view, buttons disabled, autohide enabled, default time 13:35
<script>
$('#tp-autohide').timePicker({'position':'left','float':'bottom','enable_buttons':false,'autohide':true});
</script>
<div id="tp-autohide" >
<input type="text" placeholder="Select time.." />
</div>
Value in input, custom buttons text
Position: top, float: right, 12-hour view
<script>
$('#tp-input-12').timePicker({'position':'top','float':'right','twelve_hour':true,'done_text':':)','cancel_text':':('});
</script>
<div id="tp-input-12" >
<input type="text" placeholder="Select time.." value="09:40 PM" />
</div>
Broken value in 12H PM format, but picker in 24H format
Position: right, float: center, 12-hour view
<script>
$('#tp-broken').timePicker({'position':'right','float':'center'});
</script>
<div id="tp-broken" >
<input type="text" placeholder="Select time.." value="6:15 PM" />
</div>
Call functions manualy.
Position: left, float: bottom, 12-hour view
<script>
var manual = $('#tp-manual').timePicker({'position':'left','float':'bottom'});
$('#tp-button').on('click',function(e){
manual.timePicker('toggleView', 'toggle');
});
</script>
<div id="tp-manual" >
<input type="text" placeholder="Select time.." /> <input type="button" id="tp-button" value="toggle!" />
</div>