Material Clock Time Picker jQuery Plugin – MDTimePicker

Time & Clock
File Size: 7.2 KB
Views Total: 1099 views
Last Update:June 10, 2022
Publish Date: August 29, 2017
Official Website: Go to website
License: MIT
Plugin Author: dmuy
Demo    Download

A Free jQuery Plugin with MDTimePicker Material Design in jQuery time picker plugin that creates it easy to pick a time from a circular clock interface.
RTL and Persian Version are often downloaded here.

How to use :

Add the MDTimePicker plugin’s Script and stylesheet in the header of your web page.

<link href="mdtimepicker.css" rel="stylesheet">
<script src="/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>

Create a normal input field to accept the time selection.

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

Initialize the time picker on document ready.


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


API methods.

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

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

// destroying the timepicker


List Of Version :
  • v2.0.0
  • v2.0.0-rc
  • v1.0.2
  • v1.0.2-rc2
  • v1.0.2-rc
  • v1.0.1
  • v1.0


Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.