Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker

Material Inspired Clock Time Picker Plugin - jQuery MDTimePicker
File Size: 16.2 KB
Views Total: 20487
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

MDTimePicker is a Material Design inspired jQuery time picker plugin that makes it easy to select a time from a circular clock interface.

RTL and Persian Version can be downloaded here.

How to use it:

1. Include the MDTimePicker plugin's stylesheet in the header of your web page.

<link href="mdtimepicker.css" rel="stylesheet">

2. Create a normal input field to accept the time selection.

<input type="text" id="timepicker"/>

3. Include jQuery JavaScript library and the MDTimePicker plugin's script at the bottom of the web page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="mdtimepicker.js"></script>

4. Initialize the time picker on document ready. Done.

$(document).ready(function(){
  $('#timepicker').mdtimepicker(); 
});

5. 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

}); 

6. The event which will be fired on each time change.

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

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

Changelog:

2020-05-09

  • Added dark theme; and allowed config to specify custom theme name; added custom theme format (mdtimepicker-theme.css)
  • Added clearBtn config to show clear button
  • Minor code fixes/improvements

2020-02-09

2020-02-06

  • Update JS & CSS

2018-09-03

  • Minor fix

2018-07-18

  • Bug fix

2018-06-03

  • Bug fix

2018-02-14

  • added 'Destroy' method.

2017-10-03

  • bugfix

This awesome jQuery plugin is developed by dmuy. For more Advanced Usages, please check the demo page or visit the official website.