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.

    $('#timepicker').mdtimepicker(); //Initializes the time picker

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

    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
}); //Initializes the time picker

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.