jQuery Material Design RTL Time Picker Plugin

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.


  // 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){

5. API methods.

// setting the value
$('#timepicker').mdtimepicker('setValue', '3:30 PM');

// calling the `show` and `hide` functions

// destroying the timepicker

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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *