A Free jQuery Plugin with MDTimePicker Material Design in jQuery time picker plugin that creates it easy to pick a time from a circular clock interface.
RTL and Persian Version are often downloaded here.
Table of Contents
How to use :
Add the MDTimePicker plugin’s Script and stylesheet in the header of your web page.
<link href="mdtimepicker.css" rel="stylesheet">
<script src="/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>
Create a normal input field to accept the time selection.
<input type="text" id="timepicker"/>
Initialize the time picker on document ready.
$(document).ready(function(){
$('#timepicker').mdtimepicker();
});
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
});
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');
Done
Thanks for make jQuery plugin is developed by dmuy For more Helpfull for users, please check the demo page or visit the official website.
