SyntaxFix

[javascript] What's a Good Javascript Time Picker?

I wasn't happy with any of the suggested time pickers, so I created my own with inspiration from Perifer's and the HTML5 spec:

http://github.com/gregersrygg/jquery.timeInput

You can either use the new html5 attributes for time input (step, min, max), or use an options object:

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />

<script type="text/javascript">
    $("input[name='myTime']").timeInput(); // use default or html5 attributes
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

Validates input like this:

  • Insert ":" if missing
  • Not valid time? Replace with blank
  • Not a valid time according to step? Round up/down to closest step

The HTML5 spec doesn't allow am/pm or localized time syntax, so it only allowes the format hh:mm. Seconds is allowed according to spec, but I have not implemented it yet.

It's very "alpha", so there might be some bugs. Feel free to send me patches/pull requests. Have manually tested in IE 6&8, FF, Chrome and Opera (Latest stable on Linux for the latter ones).

Examples related to javascript

• need to add a class to an element • How to make a variable accessible outside a function? • Hide Signs that Meteor.js was Used • How to create a showdown.js markdown extension • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Summing radio input values • How to execute an action before close metro app WinJS • javascript, for loop defines a dynamic variable name • Getting all files in directory with ajax

Examples related to jquery

• How to make a variable accessible outside a function? • Jquery assiging class to th in a table • Please help me convert this script to a simple image slider • Highlight Anchor Links when user manually scrolls? • Getting all files in directory with ajax • Bootstrap 4 multiselect dropdown • Cross-Origin Read Blocking (CORB) • bootstrap 4 file input doesn't show the file name • Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource • how to remove json object key and value.?

Examples related to time

• Date to milliseconds and back to date in Swift • How to manage Angular2 "expression has changed after it was checked" exception when a component property depends on current datetime • how to sort pandas dataframe from one column • Convert time.Time to string • How to get current time in python and break up into year, month, day, hour, minute? • Xcode swift am/pm time to 24 hour format • How to add/subtract time (hours, minutes, etc.) from a Pandas DataFrame.Index whos objects are of type datetime.time? • What does this format means T00:00:00.000Z? • How can I parse / create a date time stamp formatted with fractional seconds UTC timezone (ISO 8601, RFC 3339) in Swift? • Extract time from moment js object

Examples related to input

• Angular 4 - get input value • React - clearing an input value after form submit • Min and max value of input in angular4 application • Disable Button in Angular 2 • Angular2 - Input Field To Accept Only Numbers • How to validate white spaces/empty spaces? [Angular 2] • Can't bind to 'ngModel' since it isn't a known property of 'input' • Mask for an Input to allow phone numbers? • File upload from <input type="file"> • Why does the html input with type "number" allow the letter 'e' to be entered in the field?