Basic Example
$('#basicExample').timepicker();
A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.
Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.7kb minified and gzipped) and easy to customize.
$('#basicExample').timepicker();
Set the scroll position to local time if no value selected.
$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
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());
});
Prevent selection of certain time values.
$('#disableTimeRangesExample').timepicker({
'disableTimeRanges': [
['1am', '2am'],
['3am', '4:01am']
]
});
Custom options can be added to the dropdown menu.
$('#noneOptionExample').timepicker({
'noneOption': [
{
'label': 'Foobar',
'className': 'shibby',
'value': '42'
},
'Foobar2'
]
});
$('#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': function(i) {
return (i%2) ? 15 : 45;
}
});
jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will round the entered time to the nearest option on the dropdown list.
$('#roundTimeExample').timepicker({ 'forceRoundTime': true });
jquery-timepicker can render itself as a select element too.
$('#selectExample').timepicker();
$('#selectButton').click(function(e) {
$('#selectExample').timepicker('option', { useSelect: true });
$(this).hide();
});
jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.
$('#spanExample').timepicker();
$('#openSpanExample').on('click', function(){
$('#spanExample').timepicker('show');
});
<p id="datepairExample">
<input type="text" class="date start" />
<input type="text" class="time start" /> to
<input type="text" class="time end" />
<input type="text" class="date end" />
</p>
<script type="text/javascript" src="datepair.js"></script>
<script type="text/javascript" src="jquery.datepair.js"></script>
<script>
// initialize input widgets first
$('#datepairExample .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#datepairExample .date').datepicker({
'format': 'yyyy-m-d',
'autoclose': true
});
// initialize datepair
$('#datepairExample').datepair();
</script>
Check the documentation or submit an issue on GitHub.