md-time-picker

MD-Time-Picker

Material concept time picker jquery plugin.

DEMO

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>

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)
    is24Hour: true,        // show picker in 24 hour mode
    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.