Material Concept Time Picker jQuery Plugin – MDTimePicker

Do you want to add modern time picker feature on your material design website if yes then in this post I am going to share awesome jQuery Plugin to add timepicker on your web app. MDTimePicker is a Material Design inspired jQuery time picker plugin that makes it easy to select a time from a circular clock interface in AM and PM form.
alt text


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

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


Add a reference id on your form input element for later use:

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


Initializes the time picker on DOM load.


You can also customise default plugin options by editing following properties.

    timeFormat: 'hh:mm:ss.000', 
    format: 'h:mm tt',    
    theme: 'blue',        
    readOnly: true,       
    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

See live demo and download source code.


This awesome jQuery plugin is developed by dmuy. Visit their official github repository for more information and follow for future updates.