Material Clock Time Picker jQuery Plugin – MDTimePicker

Time & Clock
File Size: 7.2 KB
Views Total: 1650 views
Last Update:November 24, 2022
Publish Date: August 29, 2017
Official Website: Go to website
License: MIT
Plugin Author: dmuy
Demo    Download

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.

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.
List Of Version :
  • v2.0.0
  • v2.0.0-rc
  • v1.0.2
  • v1.0.2-rc2
  • v1.0.2-rc
  • v1.0.1
  • v1.0

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