Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

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

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.

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


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

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



  • 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.