Fork me on GitHub

What is this?

It’s a time picker similar to how Google Calendar’s time picker works for events. It’s meant to be smart, sexy and intuitive.

Some things that make is super duper fantastic:

  • Start time defaults to users current time (within your set increment).
  • Tabbing out of the field without selecting a time will cause it to make an educated guess. Try typing a badly formatted time like 115 or 1 or 1pm or 28 then tabbing out.
  • If the end time is less than the start time, evaluate it to the opposite am/pm of the start time. Example: 7:00AM – 5… 5 will default to PM.
  • Fetch time in H:i:s format (13:30:00) for comparing/validating. Done so by calling $(input).data(‘timeAutocomplete’).getTime()
  • Uses placeholder attribute if detected, if not, it uses our own placeholder text.
  • Oh, and it’s tested 🙂 – see tests/index.html to run tests

Basic usage


Advanced usage #1

Injecting an existing value and using 24hr as the formatter.

    formatter: '24hr',
    value: '07:00:00'

    formatter: '24hr',
    value: '09:30:00'

From To

Advanced usage #2

Using a ‘from’ and ‘to’ input. We use a ‘from_selector’ argument in the set of options on the ‘to’ field. This makes the time autocomplete aware of the time in the other
field. If the ‘from’ field is ‘8:00 AM’ and we start typing into the ‘to’ field with ‘4’, it will show us a list of 4 ‘PM’ instead of 4 ‘AM’ options.

    increment: 5,
    value: '08:00:00'

    increment: 5,
    from_selector: '#from-ampm',
    value: '17:30:00' // likely populated from your database.

From To

Advanced usage #3

    formatter: 'french'

    formatter: 'french',
    value: '17:00:00'

From To

Initialization options

Below is a set of options you can pass when you call $(‘#my-input’).timeAutocomplete(options);

options = {
Option key Default value Possible values Description
auto_complete { delay: 0, autoFocus: true, minLength: 0 } (object) View here. Any options to over-ride jQuery UI autocomplete plugin.
formatter ampm (string) ampm | 24hr | french The formatter we want to use
value ” (string) ’13:30:00′ Allows you to pass in a 24hr (H:i:s) time to be formatted and displayed in the field. It’s the same as calling $(‘#from’).data(‘timeAutocomplete’).setTime(’13:30:00′);
from_selector ” (string) #from You’ll want to use this option on the #to element if you’re using the
‘ampm’ formatter. It applies a level of
“smartness” when dealing with both from/to inputs. If your #from input is 8:00 AM then the user types in “5” into the #to input, it will give them possible increments in PM.
increment 15 (int) 5, 10, 15, 30, 60 The increment you want the time dropdown to appear in. A 15 minute increment would produce: [‘7:15 AM’, ‘7:30 AM’, ‘7:45 AM’].
start_hour 0 (int) Any number on or between 0 and 24 What hour you want start the selectable time list to start at.
end_hour 24 (int) Any number on or between 0 and 24 What hour you want the end of the selectable time list to end at.
auto_value true true | false If false, it will not inject the current time as a value. Your input will be empty.
blur_empty_populate true true | false If we blur from the input field and it’s empty, populate it with our empty default value (see next line).
empty {
h: ’12’,
m: ’00’,
sep: ‘:’,
postfix: ‘ PM’
} (object)
The default empty value


Once you initialize timeAutocomplete() on an element, you have access to methods via data(‘timeAutocomplete’).





None Completely removes timeAutocomplete plugin from the input


None Gets the time in H:i:s (13:30:00) format.


time: ’13:30:00′ Sets the time by passing in a 24hr format. This will be formatted appropriately before being displayed. NOTE: This should be used instead of .val()


formatter: ‘ampm’ or ’24hr’ or ‘french’ Changes the formatter type on the fly.


  • jQuery (only tested with 1.10)
  • jQuery UI w/ Autocomplete plugin (only tested with 1.10.3)

Browser Support

* IE 7+
* All other good browsers (Firefox, Chrome, Safar)



by Jordan Boesch on Jun 6, 2013 - Google+ - 15 comments