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.

Basic Example


Scroll Default Example

Set the scroll position to local time if no value selected.

$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });

Set Time Example

Dynamically set the time using a Javascript Date object.

$('#setTimeButton').on('click', function (){
    $('#setTimeExample').timepicker('setTime', new Date());

Duration Example

Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.

    'minTime': '2:00pm',
    'maxTime': '11:30pm',
    'showDuration': true

Event Example

Trigger an event after selecting a value. Fires before the input onchange event.

$('#onselectExample').on('changeTime', function() {

DisableTimeRanges Example

Prevent selection of certain time values.

    'disableTimeRanges': [
        ['1am', '2am'],
        ['3am', '4:01am']

noneOption Example

Custom options can be added to the dropdown menu.

    'noneOption': [
            'label': 'Foobar',
            'className': 'shibby',
            'value': '42'

timeFormat Example

timepicker.jquery uses the time portion of PHP's date formatting commands.

$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });

Step Example

Generate drop-down options with varying levels of precision.

$('#stepExample1').timepicker({ 'step': 15 });
    'step': function(i) {
        return (i%2) ? 15 : 45;

forceRoundTime Example

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 });

Select Example

jquery-timepicker can render itself as a select element too.

$('#selectButton').click(function(e) {
  $('#selectExample').timepicker('option', { useSelect: true });

Non-input Example

jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.

    $('#openSpanExample').on('click', function(){

Datepair Plugin Example

jquery-timepicker is designed to work with the jquery-datepair plugin.


<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" />

<script type="text/javascript" src="datepair.js"></script>
<script type="text/javascript" src="jquery.datepair.js"></script>
    // initialize input widgets first
    $('#datepairExample .time').timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia'

    $('#datepairExample .date').datepicker({
        'format': 'yyyy-m-d',
        'autoclose': true

    // initialize datepair

Need Help?

Check the documentation or submit an issue on GitHub.