RTL Time Picker In Material Design With jQuery – MDTimePicker

Time & Clock
File Size: 7.59 KB
Views Total: 816 views
Last Update:April 12, 2022
Publish Date: March 27, 2019
Official Website: Go to website
License: MIT
Plugin Author:
Demo    Download

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

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.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.

Related jQuery Plugins

You Might Also Like