Usage

To create a time picker, just call mdtimepicker():

//Initializes a time picker for each input element with the class name '.mdtimepicker-input'
mdtimepicker();

//Initializes the time picker using the specified query selector
mdtimepicker('#timepicker');

//Initializes a time picker using then matched input element
mdtimepicker(document.querySelector('#timepicker'));

//Initializes a time picker for each mached input element
mdtimepicker(document.querySelectorAll('.timepicker'));

Using configurations

During initialization, you can also specify the configurations like min and max time.

mdtimepicker('#timepicker', { theme: 'dark', clearBtn: true, minTime: '3:00 PM', maxTime: '11:00 PM' });

Min and Max

To specify the mininum and/or maximum time the user can select on othe time picker, just specify data-mintime and/or data-maxtime attributes on your input element

<!-- sets minimum time to current client (system) time -->
<input type="text" id="timepicker" data-mintime="now"/>
<!-- sets minimum time to 3:00 PM -->
<input type="text" id="timepicker" data-mintime="3:00 PM"/>

Specify both the mininum and maximum time to create a specific time range acceptable:

<!-- sets minimum to 1:00 AM and maximum to current client (system) time-->
<input type="text" id="timepicker" data-mintime="1:00 AM" data-maxtime="now"/>

Or specify minTime and/or maxTime in the initialization configurations as shown above.

Usable built-in methods

Below are some built-in methods you can use (assuming the time picker is already initialized).

setValue - Sets the (selected) value

mdtimepicker('#timepicker', 'setValue', '3:00 PM');

setMinTime - Sets the minimum time selectable

mdtimepicker('#timepicker', 'setMinTime', '1:00 PM');

setMaxTime - Sets the maximum time selectable

mdtimepicker('#timepicker', 'setMaxTime', 'now');

show - Programmatically shows the time picker

mdtimepicker('#timepicker', 'show');

hide - Programmatically hides the time picker

mdtimepicker('#timepicker', 'hide');

destroy - Removes the time picker plugin

mdtimepicker('#timepicker', 'destroy');

Event

The event timechanged is fired after selection of time (after OK button is clicked). You can use this to get the new time value:

mdtimepicker('#timepicker');
document.querySelector('#timepicker').addEventListener('timechanged', function(e){
  console.log(e.value); // gets the input value
  console.log(e.time);  // gets the data-time value
});

Or you can use the events.timeChanged callback configuration to catch the time selection changes.

Themes

You can specify the color theme of the time picker by adding theme option upon initialization:

mdtimepicker('#timepicker', { theme: 'green' });

Or by adding a data-theme attribute on the input element:

<input type="text" id="timepicker" data-theme="dark"/>

Note: If data-theme attribute is used, theme configuration will be overridden.

Predefined themes are: red,blue, green, purple, indigo, teal and dark. If you don't specify the theme, the default theme (blue) will be used.

Custom theme

If you want to customize the theme, just use the src/themes/_format.scss file and change the following:

$theme: 'yellow';  // theme name
$color: #F9A825;   // theme color

Then compile it using any sass compiler. Or if you are using this project, just run the npm scripts compile-theme-css and minify-theme-css (for a compressed version).

If you prefer editing a css file, you can edit the dist/mdtimepicker-theme.css file.

Remember

Comment or remove the line shown below in the css file if you already have a link to the Roboto font.

@import url('https://fonts.googleapis.com/css?family=Roboto');