A repository of over 1000 quality jQuery plugins

jQuery JQueryTimeAutocomplete

JQueryTimeAutocomplete is a jQuery Autocomplete plugin.

Created by 7shifts

jQuery autocomplete plugin that works with times. Works basically the same as Google Calendars time input when you add an event. Example: http://7shifts.com/better-time-drop-downs-jquery-timeautocomplete/

Not what you're looking for? Click here to view more Autocomplete jQuery plugins

jQuery timeAutocomplete Plugin

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


Advanced usage #1

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

    formatter: '24hr',
    value: '07:00:00'


    formatter: '24hr'

More documentation and examples


  • Run npm install to install dependencies (requires NodeJS).
  • Make changes to any of the .js files
  • Run grunt from the project root to compile
  • Commit and submit pull request

You might also like these other Autocomplete jQuery Plugins

  • Asdfasdf.js

    Auto save data form- The easiest way to not let your user lose their data while filling a form.

  • jQuery Typeahead

    jQuery Typeahead plugin (autocomplete) for search input

  • Tagmate

    jQuery plugin for Facebook/Twitter style textarea @user autocomplete + #hashtag parser