Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker
File Size: | 20.7 KB |
---|---|
Views Total: | 32630 |
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.
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.