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.

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

Great Plugin. If you could add one more feature it could be more than perfect.

Similar to your from_selector option/ or if you could modify this option so that when I select 12:00 am in the first input ( i.e from field) the range in next input ( i.e To field ) automatically start from 12:15 am or 12:30 am ( giving me the option to specifiy time gap).

* Reason for having this feature – when we select a time ( from ), then we’re likely to select a time in to field that is after that time ( in From field)