Material time picker library – a timer picker written in ES6 and SASS

Material time picker library – a timer picker written in ES6 and SASS.

Material time picker written in JavaScript

The material time picker solution in pure JS. There are a few other OS material picker libraries but they are either not actively maintained, or require heavy dependencies. This library is built with plain JavaScript and no dependencies. Written in ES6 and SASS.

The library currently supports both 12 and 24 time formats.

Material time picker library in pure JavaScript
Material time picker library in pure JavaScript

Using standard format

The bindInput will set an event listener on the input element. When a focus event is trigger the time picker will be opened with the input element in context:

var timepicker = new TimePicker();
timepicker.bindInput('#bind-example');

Using military format

This format is also available. By the way, it is also possible to pass an HTMLElement instead of a selector:

var timepicker = new TimePicker();
inputEl = document.getElementById('bind-example-military');
timepicker.bindInput(inputEl, {timeFormat: 'military'});

Current only one option is implemented to change between 12 and 24 hour time. They are passed when one of the public API methods are called, merged with default options, and set the property mtpOptions on the input element specified.

Demo & project homepage:

http://hownowbrowncow.github.io/material-timepicker

GitHub:

https://github.com/hownowbrowncow/material-timepicker

You may also like:

Nice looking jQuery and Bootstrap color picker – Pick-a-Color

jQuery and Bootstrap color picker sliders

DrumJS – A jQuery animated date picker and value selector (iOS style)

Date range picker for Bootstrap

iOS 7 like JavaScript range slider solution

Analog and digital jQuery world clock plugin – jClocksGMT.js

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1