material-pickers-time

Install

npm install material-pickers-time

Build

Requires the use of the gulp task runner and babel cli. To install globally, use npm install -g gulp babel-cli

• Build - gulp
• Test - gulp test:js
• Run Locally - npm start
• Build module-ready version - gulp && npm run build

About

Currently, the Material Design Lite project doesn't have any picker features implemented. There are a few other OS material picker libraries but they are either not actively maintained, or require heavy dependencies.

In need of a timepicker for a current project I made this library. Built with vanilla JavaScript and no dependencies. Written in ES6 and SASS.

The library currently supports both 12 and 24 time formats.

To check out live examples and view the test runner check out https://pickers.nickc.io/time.html

Options

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.

{
timeFormat: standard or military by default it will be standard
}

API

bindInput

Adds an event listener to input element specified. When the input element triggers a focus event the timepicker will open.

parameters

inputEl: either a string selector, or a HTMLElement
options: (optional) options object to be set to input element object

example

const timepicker = new TimePicker();

// using a selector with no options
timepicker.bindInput('#selector');

// using a cached element with 24 time format
timepicker.bindInput(cachedEl, {timeFormat: 'military'});

openOnInput

Better suited for use in a framework environment where you want more customized control over the picker. When called it will immediately open with the input element specified in context.

parameters

inputEl: either a string selector, or a HTMLElement
options: (optional) options object to be set to input element object

example

const timepicker = new TimePicker();
const standardInput = document.querySelectorAll('#standard-input');

standardInput.on('focus', event => timepicker.openOnInput(event.target));