Better Time Drop Downs for Ranges: J Query Time Autocomplete

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

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

Show getTime() value (H:i:s format)

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 Show getTime() value (H:i:s format)

Advanced usage #2

Using a ‘from’ and ‘to’ input. We use a ‘from_selector’ argument in the set of options on the ‘to’ field. Thismakes the time autocomplete aware of the time in the otherfield. If the ‘from’ field is ‘8:00 AM’ and we start typing into the ‘to’ field with ‘4’, it will show us a listof 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 Show getTime() value (H:i:s format)

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](http://api.jqueryui.com/autocomplete/).	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

}

API

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

Method	Args	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. NOTE: This should be used instead of .val()
$(‘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

• 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, Safari)

Download

Download or Goto Github repo