wickedpicker.js - A simple jQuery timepicker
- jQuery (>= 1.9)
$ bower install wickedpicker
In your HTML
var options =now: "12:35" //hh:mm 24 hour format only, defaults to current timetwentyFour: false //Display 24 hour format, defaults to falseupArrow: 'wickedpicker__controls__control-up' //The up arrow class selector to use, for custom CSSdownArrow: 'wickedpicker__controls__control-down' //The down arrow class selector to use, for custom CSSclose: 'wickedpicker__close' //The close class selector to use, for custom CSShoverState: 'hover-state' //The hover state class to use, for custom CSStitle: 'Timepicker' //The Wickedpicker's title,showSeconds: false //Whether or not to show seconds,secondsInterval: 1 //Change interval for seconds, defaults to 1,minutesInterval: 1 //Change interval for minutes, defaults to 1beforeShow: null //A function to be called before the Wickedpicker is shownshow: null //A function to be called when the Wickedpicker is shownclearable: false //Make the picker's input clearable (has clickable "x");;
'time' get the current time inside of the input element that has a wickedpicker attached to it.
If multiple input fields have the same class and instantiate a wickedpicker then pass the index of the timepicker you'd like to select
The Wickedpicker opens when the bound input is clicked, or focused on (try tabbing), and it can be closed by either clicking the X, by clicking outside of it, or by pressing esc. The arrows icons increase or decrease their associated time values or toggle the meridiem. The values can also be changed using the up and down keys when focused on. To move to the next value just press the left or right arrow key.
For more checkout Wickedpicker gh-pages
Copyright (c) 2015-2016 Eric Gagnon Licensed under the MIT license.