Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker
File Size: 10.8 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MDTimePicker is a Material Design inspired jQuery time picker plugin that makes it easy to select a time from a circular clock interface.

How to use it:

1. Include the MDTimePicker plugin's stylesheet in the header of your web page.

<link href="mdtimepicker.css" rel="stylesheet">

2. Create a normal input field to accept the time selection.

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

3. Include jQuery JavaScript library and the MDTimePicker plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>

4. Initialize the time picker on document ready. Done.

$(document).ready(function(){
  $('#timepicker').mdtimepicker(); 
});

5. Options and defaults.

$('#timepicker').mdtimepicker({

  // format of the time value (data-time attribute)
  timeFormat: 'hh:mm:ss.000', 

  // format of the input value
  format: 'h:mm tt',      

  // theme of the timepicker
  // 'red', 'purple', 'indigo', 'teal', 'green'
  theme: 'blue',        

  // determines if input is readonly
  readOnly: true,       

  // 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
  hourPadding: false     

}); 

Change log:

2017-10-03

  • bugfix

This awesome jQuery plugin is developed by dmuy. For more Advanced Usages, please check the demo page or visit the official website.