Material TimePicker is based on MDTimePicker which helps you to create a Material Design time picker for web pages whose languages are written from right to left. RTL support and flexibility to change languages such as Hebrew or Arabic.

material time picker jquery, timepicker jquery, jquery time picker, time picker jquery plugin, simple jquery timepicker, start time and end time picker in jquery

How to make use of it:

1. Create an input file for the right-to-left time picker.

<input type="text" id="timepicker" placeholder="Pick a time..." />

2. Include necessary JavaScript 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>

3. Call the function in the input field you just created and configure the time picker with the following options.

$('#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: 'انصراف',
  
});

4. Fires an event every time the time changes.

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

5. 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');

Material Design RTL Time Picker With jQuery, RTL Time Picker Plugin/Github

See Demo And Download

Official Website(amiryxe): Click Here

This superior jQuery/javascript plugin is developed by amiryxe. For extra Advanced Usage, please go to the official website.