Material Concept Time Picker jQuery Plugin – MDTimePicker

by Posted on

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.


Published by admin