Free jQuery Plugin in RTL Time Picker with MDTimePicker plugin, it’s version of MDtime picker, the languages written from right to left (like Hebrew or Arabic).
English Version Time Picker : Click Here
Table of Contents
How to use :
Add the jQuery Library with time-picker Script and CSS files on the page.
<link rel="stylesheet" href="mdtimepicker.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>
Create an input filed for the RTL time picker.
<input type="text" id="timepicker" placeholder="Pick a time." />
Add the function on the input field you just created and config the time picker with Script.
$('#timepicker').mdtimepicker({
// time format
timeFormat: 'hh:mm:ss.000',
// format of the input value
format: 'hh:mm tt',
// readonly mode
readOnly: 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
hourPadding: false,
// theme of the timepicker
// 'red', 'purple', 'indigo', 'teal', 'green', 'dark'
theme: 'green',
// custom label text
okLabel: 'تائید',
cancelLabel: 'انصراف',
});
Add Script for every time the time changes.
$('#timepicker').mdtimepicker().on('timechanged', function(e){
console.log(e.value);
console.log(e.time);
});
As you need with 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 For more Helpfull for users, please check the demo page or visit the official website.
