Time Picker

Initialization

document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.timepicker');
  const instances = M.Timepicker.init(elems, {
    // specify options here
  });
});

Options

Name	Type	Default	Description
duration	Number	350	Duration of the transition from/to the hours/minutes view.
container	Element \|\| String	null	Specify a DOM element OR selector for a DOM element to render the time picker in, by default it will be placed before the input.
showClearBtn	Boolean	false	Show the clear button in the Timepicker.
defaultTime	String	'now'	Default time to set on the timepicker 'now' or '13:14'
fromNow	Number	0	Millisecond offset from the defaultTime.
i18n	Object	See i18n documentation.	Internationalization options.
autoClose	Boolean	false	DEPRECATED Automatically close picker when minute is selected.
twelveHour	Boolean	true	Use 12 hour AM/PM clock instead of 24 hour clock.
vibrate	Boolean	true	Vibrate device when dragging clock hand.
onOpenStart	Function	null	DEPRECATED Callback function called before modal is opened.
onOpenEnd	Function	null	DEPRECATED Callback function called after modal is opened.
onCloseStart	Function	null	DEPRECATED Callback function called before modal is closed.
onCloseEnd	Function	null	DEPRECATED Callback function called after modal is closed.
onSelect	Function	null	Callback function when a time is selected, first parameter is the hour and the second is the minute.
onInputInteraction	Function	null	Callback function on input field interaction.
autoSubmit	Boolean	true	Condition to auto submit selected date to input field, 'true' condition will remove the confirmation buttons.
onDone	Function	null	Callback function on confirm interaction.
onCancel	Function	null	Callback function on cancel interaction.

Timepicker Internationalization options

Use these in the i18n option to localize the timepicker.

Key	Text
cancel	'Cancel'
clear	'Clear'
done	'Ok'

Properties

Name	Type	Description
el	Element	The input element the plugin was initialized with.
options	Object	The options the instance was initialized with.
isOpen	Boolean	If the picker is open.
time	String	The selected time.

Methods

All the methods are called on the plugin instance. You can get the plugin instance like this:
const instance = M.Timepicker.getInstance(elem);

.showView();

Show hours or minutes view on timepicker

Arguments

String: The name of the view you want to switch to, 'hours' or 'minutes'.

instance.showView('hours');

.destroy();

Destroy plugin instance and teardown

instance.destroy();

.open();

DEPRECATED Open timepicker

.close();

DEPRECATED Close timepicker

Select a single time with the support of the awesome Timepicker.