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.

Libraries

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="//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:

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.

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

Related