Options

Calling mdtimepicker() will initialize the time picker. If selectors is not provided, the plugin will look for input elements with the class mdtimepicker-input.

mdtimepicker(
  [selectors],  // optional; input element selectors; input element; Array or NodeList of input elements
  [config],     // optional; time picker configurations
  [...params]   // optional; this is used when calling time picker built-in methods which requires parameters like 'setValue'
)

Configurations

{
  // 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
  theme: 'blue',
  // 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,
  // determines if the clock will use 24-hour format in the UI; format config will be forced to `hh:mm` if not specified
  is24hour: false,
  events: {
    // Callback function on time selection
    timeChanged: null,
    // Callback function when time picker is initialized
    ready: null,
    // Callback function when time picker is shown
    shown: null,
    // Callback function when time picker is hidden
    hidden: null
  }
}

Callback functions

events: {
  /**
   * Callback function on time selection
   * Parameters: 
   *    data         - Object contains the data of the selected time.
   *      data.time  - Formatted time using `timeFormat`
   *      data.value - Formatted time using `format`; The same with the input value
   *    timepicker   - The time picker object instance
   */
  timeChanged(data, timepicker);

  /**
   * Callback function when time picker is initialized
   * Parameter:
   *     timepicker - The time picker object instance
   */
  ready(timepicker);

  /**
   * Callback function when time picker is shown
   */
  shown();
  
  /**
   * Callback function when time picker is hidden
   */
  hidden();
}

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:

//Initializes the time picker and uses the specified format (i.e. 23:30)
mdtimepicker('#timepicker', { format: 'hh:mm' });

Note: If is24hour configuration is set to true, format default will be hh:mm.