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


Libraries

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

<!--CSS-->
<link href="mdtimepicker.min.css" rel="stylesheet" type="text/css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="mdtimepicker.min.js"></script>

HTML

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

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



JS

Initializes the time picker on DOM load.

 $(document).ready(function(){
    $('#timepicker').mdtimepicker(); //Initializes the time picker
  });

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

$(document).ready(function(){
    $('#timepicker').mdtimepicker({
    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.

DEMO | DOWNLOAD

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


One Reply to “Material Concept Time Picker jQuery Plugin – MDTimePicker”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.