Better Time Drop Downs for Ranges: J Query Time Autocomplete

Jordan Boesch

By Jordan Boesch

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();

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. 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

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

Start using 7shifts today

7shifts is the all-in-one labor platform built for restaurants to simplify employee scheduling and labor management. Easily manage your teams’ schedules, timesheets, communication, tasks, tips and more– all in one place with 7shifts.

Start FREE Trial.

Jordan Boesch
Jordan Boesch

Jordan is the CEO @ 7shifts. Jordan grew up working in his dad’s restaurant and fell in love with the industry–the rest is history.