Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

File Size: 20.7 KB
Views Total: 33676
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

MDTimePicker is a Material Design inspired jQuery time picker plugin that makes it easy to select a time from a circular clock interface.

RTL and Persian Version can be downloaded here.

See Also:

How to use it:

1. Include the MDTimePicker plugin's stylesheet in the header of your web page.

<link href="mdtimepicker.css" rel="stylesheet">

2. Create a normal input field to accept the time selection.

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

3. Include jQuery JavaScript library and the MDTimePicker plugin's script at the bottom of the web page.

<script src="//"></script>
<script src="mdtimepicker.js"></script>

4. Initialize the time picker on document ready. Done.


5. Options and defaults.


  // format of the time value (data-time attribute)
  timeFormat: 'hh:mm:ss.000', 

  // format of the input value
  format: 'h:mm tt',      

  // theme of the timepicker
  // 'red', 'purple', 'indigo', 'teal', 'green', 'dark'
  theme: 'blue',        

  // determines if input is readonly
  readOnly: true,       

  // 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
  hourPadding: false,

  // determines if clear button is visible  
  clearBtn: false


6. The event which will be fired on each time change.

$('#timepicker').mdtimepicker().on('timechanged', function(e){

7. API methods.

// setting the value
$('#timepicker').mdtimepicker('setValue', '3:30 PM');

// calling the `show` and `hide` functions

// destroying the timepicker



  • bugfixed



  • JS & CSS updated


  • Added dark theme; and allowed config to specify custom theme name; added custom theme format (mdtimepicker-theme.css)
  • Added clearBtn config to show clear button
  • Minor code fixes/improvements


  • Update JS & CSS


  • Update JS & CSS


  • Minor fix


  • Bug fix


  • Bug fix


  • added 'Destroy' method.


  • bugfix

This awesome jQuery plugin is developed by dmuy. For more Advanced Usages, please check the demo page or visit the official website.