Skip to content
Material concept time picker jquery plugin.
Branch: master
Clone or download
Latest commit 749ec42 Dec 14, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes 👾 Added .gitattributes Aug 29, 2017
LICENSE Create LICENSE Dec 5, 2017 Update Dec 14, 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


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

Minified version:

Learn more about the CDN


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.

You can’t perform that action at this time.