Material concept time picker jquery plugin.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.gitattributes 👾 Added .gitattributes Aug 29, 2017
LICENSE Create LICENSE Dec 5, 2017 Update Jul 28, 2018
mdtimepicker.css Time alignment update Aug 30, 2017
mdtimepicker.js Minor fix Sep 2, 2018
mdtimepicker.min.css Minified Jul 18, 2018
mdtimepicker.min.js Minor fix Sep 2, 2018


Material concept time picker jquery plugin.


alt text alt text

How to use

Make sure you include the jQuery library first. Include mdtimepicker.css and mdtimepicker.js in your html file:

<link rel="stylesheet" type="text/css" href="mdtimepicker.css">
<script type="text/javascript" src="mdtimepicker.js"></script>

Add a reference on your input element for later use:

<input type="text" id="timepicker"/>

Then add this piece of code in your script tag:

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


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

@import url('');


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
    readOnly: true,       // determines if input is readonly
    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


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)


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


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

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

Predefined themes are: red,blue (default), green, purple, indigo and teal. If you don't specify the theme to use or specify a theme which isn't there, the default theme will be used.