Better time drop downs for ranges: jQuery 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

<code class="language-javascript">$('#basic-example').timeAutocomplete();

Advanced usage #1

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

<code class="language-javascript">$('#from-24hr').timeAutocomplete({
    formatter: '24hr',
    value: '07:00:00'
});

$('#to-24hr').timeAutocomplete({
    formatter: '24hr',
    value: '09:30:00'
});```

 From <input id="from-24hr" type="text"></input> To <input id="to-24hr" type="text"></input><button id="show-24hr-time-format">Show getTime() value (H:i:s format)</button>

### <span>Advanced usage #2</span>

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

<code class="language-javascript">$('#from-french').timeAutocomplete({
    formatter: 'french'
});

$('#to-french').timeAutocomplete({
    formatter: 'french',
    value: '17:00:00'
});```

 From <input id="from-french" type="text"></input> To <input id="to-french" type="text"></input><button id="show-french-time-format">Show getTime() value (H:i:s format)</button>

### <span>Initialization options</span>

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

`<code class="language-javascript">options = {`

<table class="table table-striped"><thead><tr><th>Option key</th><th>Default value</th><th>Possible values</th><th>Description</th></tr></thead><tbody><tr><td>[]()auto_complete</td><td>{ delay: 0, autoFocus: true, minLength: 0 } (object)</td><td>[View here](http://api.jqueryui.com/autocomplete/).</td><td>Any options to over-ride jQuery UI autocomplete plugin.</td></tr><tr><td>[]()formatter</td><td>ampm (string)</td><td>ampm | 24hr | french</td><td>The formatter we want to use</td></tr><tr><td>[]()value</td><td>” (string)</td><td>’13:30:00′</td><td>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′);</td></tr><tr><td>[]()from_selector</td><td>” (string)</td><td>#from</td><td>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.</td></tr><tr><td>[]()increment</td><td>15 (int)</td><td>5, 10, 15, 30, 60</td><td> 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’]. </td></tr><tr><td>[]()start_hour</td><td>0 (int)</td><td>Any number on or between 0 and 24</td><td>What hour you want start the selectable time list to start at.</td></tr><tr><td>[]()end_hour</td><td>24 (int)</td><td>Any number on or between 0 and 24</td><td>What hour you want the end of the selectable time list to end at.</td></tr><tr><td>[]()auto_value</td><td>true</td><td>true | false</td><td>If false, it will not inject the current time as a value. Your input will be empty.</td></tr><tr><td>[]()blur_empty_populate</td><td>true</td><td>true | false</td><td>If we blur from the input field and it’s empty, populate it with our empty default value (see next line).</td></tr><tr><td>[]()empty</td><td>{  
 h: ’12’,  
 m: ’00’,  
 sep: ‘:’,  
 postfix: ‘ PM’  
 } (object)</td><td></td><td>The default empty value</td></tr></tbody></table>`<code class="language-javascript">}`

### <span>API</span>

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

<table><thead><tr><th>### Method

</th><th>### Args

</th><th>### Description

</th></tr></thead><tbody><tr><td>#### destroy()

</td><td>None</td><td>Completely removes timeAutocomplete plugin from the input</td></tr><tr><td colspan="3">`<code class="language-javascript">$('#my-input').data('timeAutocomplete').destroy();`

</td></tr><tr><td>#### getTime()

</td><td>None</td><td>Gets the time in H:i:s (13:30:00) format.</td></tr><tr><td colspan="3">`<code class="language-javascript">$('#my-input').data('timeAutocomplete').getTime();`

</td></tr><tr><td>#### setTime(time)

</td><td>time: ’13:30:00′</td><td>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()</td></tr><tr><td colspan="3">`<code class="language-javascript">$('#my-input').data('timeAutocomplete').setTime('13:30:00');`

</td></tr><tr><td>#### setFormatter(formatter)

</td><td>formatter: ‘ampm’ or ’24hr’ or ‘french’</td><td>Changes the formatter type on the fly.</td></tr><tr><td colspan="3">`<code class="language-javascript">$('#my-input').data('timeAutocomplete').setFormatter('24hr');`

</td></tr></tbody></table>### <span>Requirements</span>

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

### <span>Browser Support</span>

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

### <span>Download</span>

<button onclick="window.location.href='https://github.com/7shifts/jQueryTimeAutocomplete/archive/master.zip';">Download</button> or <button onclick="window.location.href='https://github.com/7shifts/jQueryTimeAutocomplete/'">Goto Github repo</button>