It is a light-weight jQuery time picker plugin that means that you can set hours and minutes with up/down controls on kind fields.
Every arrow click on updates the enter and triggers its change occasion.
Options
- The popup opens beneath the chosen enter.
- Present time values seem within the hour and minute controls.
- Hours and minutes wrap independently at their limits.
- Inputs added after web page load open the picker when clicked.
- Clicking outdoors the enter and popup closes the picker.
How To Use It
1. Obtain & load css/timepicker.css and js/timepicker.js within the HTML doc. Add the custom-timepicker class to every time enter. The script binds the picker when the DOM is prepared.
<hyperlink rel="stylesheet" href="css/timepicker.css"> <script src="/path/to/cdn/jquery.min.js"></script> <script src="js/timepicker.js"></script>
2. Add the custom-timepicker class to every time enter. The script binds the picker when the DOM is prepared.
<label for="shift-start">Shift begin</label>
<enter sort="textual content" id="shift-start" identify="shift_start"
class="custom-timepicker" worth="08:30" readonly autocomplete="off">
<label for="shift-end">Shift finish</label>
<enter sort="textual content" id="shift-end" identify="shift_end"
class="custom-timepicker" placeholder="Choose a time"
readonly autocomplete="off">
3. The picker triggers the usual jQuery change occasion after every arrow click on. A delegated listener can even seize modifications from inputs added later.
$(doc).on('change', '.custom-timepicker', perform () {
console.log(this.identify + ': ' + this.worth);
});
Alternate options And Associated Assets
This superior jQuery plugin is developed by imran44. For extra Superior Usages, please examine the demo web page or go to the official web site.
