Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.5kb minified and gzipped) and easy to customize. View the source code on GitHub or download (zip).
Full documentation available here
$('#basicExample').timepicker();
Set the scroll position to local time if no value selected.
$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });
Dynamically set the time using a Javascript Date object.
$('#setTimeExample').timepicker();
$('#setTimeButton').on('click', function (){
$('#setTimeExample').timepicker('setTime', new Date());
});
Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.
$('#durationExample').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});
Trigger an event after selecting a value. Fires before the input onchange event.
$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').text($(this).val());
});
timepicker.jquery uses the time portion of PHP's date formatting commands.
$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });
Generate drop-down options with varying levels of precision.
$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({ 'step': 60 });
Use jquery-timepicker with <select> elements too.
$('#selectButton').click(function(e) {
e.preventDefault();
$('#selectExample').timepicker();
$(this).hide();
});
Shameless plug: ParkWhiz is looking for talented designers and developers to help us drag the parking industry out of the Stone Age. Visit ParkWhiz's jobs page or email jobs@parkwhiz.com and introduce yourself!
Jon Thornton — [lastname].[firstname]@gmail.com
You can download this project in either
zip or
tar formats.
Get the source code on GitHub: jonthornton/jquery.timepicker
$ git clone git://github.com/jonthornton/jquery-timepicker