Basic usage

$('#basic-example').timeAutocomplete();

Advanced usage #1

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

$('#from-24hr').timeAutocomplete({
    formatter: '24hr',
    value: '07:00:00'
});

$('#to-24hr').timeAutocomplete({
    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.

$('#from-ampm').timeAutocomplete({
    increment: 5,
    value: '08:00:00'
});

$('#to-ampm').timeAutocomplete({
    increment: 5,
    from_selector: '#from-ampm',
    value: '17:30:00' // likely populated from your database.
});
From To

Advanced usage #3

$('#from-french').timeAutocomplete({
    formatter: 'french'
});

$('#to-french').timeAutocomplete({
    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.
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).
auto_value true true | false If false, it will not inject the current time as a value. Your input will be empty.
empty { h: '12', m: '00', sep: ':', postfix: ' PM' } (object) The default empty value 
}

API

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

Method Arguments Description

destroy()

 None Completely removes timeAutocomplete plugin from the input 
$('#my-input').data('timeAutocomplete').destroy();

getTime()

 None Gets the time in H:i:s (13:30:00) format. 
$('#my-input').data('timeAutocomplete').getTime();

setTime(time)

 time: '13:30:00' Sets the time by passing in a 24hr format. This will be formatted appropriately before being displayed. 
$('#my-input').data('timeAutocomplete').setTime('13:30:00');

setFormatter(formatter)

 formatter: 'ampm' or '24hr' or 'french' Changes the formatter type on the fly. 
$('#my-input').data('timeAutocomplete').setFormatter('24hr');

Requirements