Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

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

RTL and Persian Version can be downloaded here.

See Also:

• Material Inspired Date & Date Range Picker - duDatepicker
• 10 Best Date And Time Picker JavaScript Plugins
• 10 Best Date And Timer Pickers In Vanilla JavaScript

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', 'dark'
  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,

  // determines if clear button is visible  
  clearBtn: false

}); 

6. The event which will be fired on each time change.

$('#timepicker').mdtimepicker().on('timechanged', function(e){
  console.log(e.value);
  console.log(e.time); 
});

7. API methods.

// setting the value
$('#timepicker').mdtimepicker('setValue', '3:30 PM');

// calling the `show` and `hide` functions
$('#timepicker').mdtimepicker('show');
$('#timepicker').mdtimepicker('hide');

// destroying the timepicker
$('#timepicker').mdtimepicker('destroy');

Changelog:

2020-09-18

• bugfixed

2020-09-01

• JS & CSS updated

2020-08-18

• JS & CSS updated

2020-05-09

• Added dark theme; and allowed config to specify custom theme name; added custom theme format (mdtimepicker-theme.css)
• Added clearBtn config to show clear button
• Minor code fixes/improvements

2020-02-09

• Update JS & CSS

2020-02-06

• Update JS & CSS

2018-09-03

• Minor fix

2018-07-18

• Bug fix

2018-06-03

• Bug fix

2018-02-14

• added 'Destroy' method.

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.