Skip to content
Material concept time picker jquery plugin.
Branch: master
Clone or download
Latest commit 749ec42 Dec 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes 👾 Added .gitattributes Aug 29, 2017
LICENSE Create LICENSE Dec 5, 2017
README.md Update README.md Dec 14, 2018
mdtimepicker.css Time alignment update Aug 30, 2017
mdtimepicker.js Minor fix Sep 2, 2018
mdtimepicker.min.css Minified Jul 18, 2018
mdtimepicker.min.js Minor fix Sep 2, 2018

README.md

MDTimePicker

Material concept time picker jquery plugin.

DEMO

alt text alt text

How to use

Make sure you include the jQuery library first. Include mdtimepicker.css and mdtimepicker.js in your html file:

<link rel="stylesheet" type="text/css" href="mdtimepicker.css">
<script type="text/javascript" src="mdtimepicker.js"></script>

Add a reference on your input element for later use:

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

Then add this piece of code in your script tag:

<script>
  $(document).ready(function(){
    $('#timepicker').mdtimepicker(); //Initializes the time picker
  });
</script>

CDN

Use the following if you don't want to host the js and css files:

https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.css
https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.js

Minified version:

https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.min.css
https://cdn.jsdelivr.net/gh/dmuy/MDTimePicker/mdtimepicker.min.css

Learn more about the CDN

Remember

Comment or remove the line shown below in the css file if you already have a link to the Roboto font.

@import url('https://fonts.googleapis.com/css?family=Roboto');

Options

Default time picker configurations.

{
    timeFormat: 'hh:mm:ss.000', // format of the time value (data-time attribute)
    format: 'h:mm tt',    // format of the input value
    theme: 'blue',        // theme of the timepicker
    readOnly: true,       // determines if input is readonly
    hourPadding: 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
}

Formatting

Variable Code Output
Hour h 12-hour format, no zero padding; you can add zero padding for hours less than 10 by setting the option hourPadding to true
hh 24-hour format
Minute `mm 30
AM/PM t am
tt AM

The default value of the format option is h:mm tt. You can specify the format you want by adding a parameter on initialization:

<script>
  $(document).ready(function(){
    $('#timepicker').mdtimepicker({format: 'hh:mm'}); //Initializes the time picker and uses the specified format (i.e. 23:30)
  });
</script>

Event

The event timechanged is fired after selection of time (after OK button is clicked). You can use this to get the new time value:

<script>
  $(document).ready(function(){
    $('#timepicker').mdtimepicker().on('timechanged', function(e){
      console.log(e.value); // gets the input value
      console.log(e.time);  // gets the data-time value
    });
  });
</script>

Themes

You can specify the color theme of the time picker by adding theme option upon initialization:

<script>
  $(document).ready(function(){
    $('#timepicker').mdtimepicker({theme: 'green'});
  });
</script>

Predefined themes are: red,blue (default), green, purple, indigo and teal. If you don't specify the theme to use or specify a theme which isn't there, the default theme will be used.

You can’t perform that action at this time.