Time Picker With Autocomplete Examples

With this user-friendly time picker jQuery plugin, a visitor will be able to pick an hour in custom steps as well as minutes and seconds. The autocomplete function will suggest closest match from the previously input values.

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