Code Monkey home page Code Monkey logo

jquerytimeautocomplete's Introduction

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

$('#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'
});

or

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

More documentation and examples

Contributing

  • 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

jquerytimeautocomplete's People

Contributors

jboesch avatar jonovono avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.