MDTimePicker

Material concept time picker jquery plugin.

DEMO

Installation

NPM

Install via npm:

npm i @dmuy/jquery-timepicker

Include in your app

import '@dmuy/jquery-timepicker/mdtimepicker.css'
import mdtimepicker from '@dmuy/jquery-timepicker'

CDN

Use the following if you don't want to host the js and css files:

https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker@{version}/mdtimepicker.css
https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker@{version}/mdtimepicker.js

Minified version:

https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker@{version}/mdtimepicker.min.css
https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker@{version}/mdtimepicker.min.css

Note: Replace {version} with the version you want to use.

Learn more about the CDN

Self Hosting

Copy mdtimepicker.css and mdtimepicker.js and include in your app:

<link rel="stylesheet" type="text/css" href="{path-to}/mdtimepicker.css">
<script type="text/javascript" src="{path-to}/mdtimepicker.js"></script>

Note: Replace {path-to} with the absolute or relative path to where you copied the css and js files.

Options

Default time picker configurations.

{
    timeFormat: 'hh:mm:ss.000', // format of the time value (data-time attribute)
    format: 'h:mm tt',          // format of the input value
    theme: 'blue',              // theme of the timepicker
    hourPadding: false,         // determines if display value has zero padding for hour value less than 10 (i.e. 05:30 PM); 24-hour format has padding by default
    clearBtn: false,            // determines if clear button is visible
    is24hour: false             // determines if the clock will use 24-hour format in the UI; format config will be forced to `hh:mm` if not specified
}

Formatting

| Variable | Code | Output | | ------------- |--------------|---------| | Hour | h | 12-hour format, no zero padding; you can add zero padding for hours less than 10 by setting the option hourPadding to true | | | hh | 24-hour format | | Minute | mm | 30 | | AM/PM | t | am | | | tt | AM |

The default value of the format option is h:mm tt. You can specify the format you want by adding a parameter on initialization:

$('#timepicker').mdtimepicker({format: 'hh:mm'}); //Initializes the time picker and uses the specified format (i.e. 23:30)

Note: If is24hour configuration is set to true, format default will be hh:mm.

Usage

Add this piece of code in your script:

$('#timepicker').mdtimepicker(); //Initializes the time picker

Using configurations

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

$('#timepicker').mdtimepicker({ 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

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

setMinTime - Sets the minimum time selectable

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

setMaxTime - Sets the maximum time selectable

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

show - Programmatically shows the time picker

$('#timepicker').mdtimepicker('show');

hide - Programmatically hides the time picker

$('#timepicker').mdtimepicker('hide');

destroy - Removes the time picker plugin

$('#timepicker').mdtimepicker('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:

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

Themes

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

$('#timepicker').mdtimepicker({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 follow the mdtimepicker-theme.css format, and change the {theme} in .mdtp__wrapper[data-theme='{theme}'] to your desired theme name.

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');