Font and theme export

Time Picker

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

Basic example

Click the field to open the picker, then choose a value.

<div class="input-field">
  <input id="lunchtime" type="text" class="timepicker" />
  <label for="lunchtime">Lunchtime</label>
</div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

Import the component and initialize it after the input exists. Use displayPlugin: 'docked' to open the picker next to the field.

import { Timepicker } from 'kmaterialize';

Timepicker.init(document.querySelector('#lunchtime'), {
    displayPlugin: 'docked'
});

Examples and variants

24-hour clock

Set twelveHour: false for 24-hour time and enable the Clear action when the field is optional.

Timepicker.init(document.querySelector('#lunchtime'), {
    displayPlugin: 'docked',
    twelveHour: false,
    showClearBtn: true
});

Validation

Use required on the text-based picker and validate its parsed time in your application. Native type="time" supports min and max.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Required time
Choose a start time.
Outside opening hours
Choose a time between 09:00 and 18:00. 
<div class="input-field outlined error">
    <i class="material-icons suffix" aria-hidden="true">error</i>
    <input id="validation-time" type="text" class="timepicker" required placeholder=" " value="" aria-invalid="true" aria-describedby="validation-time-error">
    <label for="validation-time">Start time</label>
    <span id="validation-time-error" class="supporting-text">Choose a start time.</span>
</div>

<div class="input-field error">
    <input id="validation-time-range" type="time" min="09:00" max="18:00" placeholder=" " value="08:00" aria-invalid="true" aria-describedby="validation-time-range-error">
    <label for="validation-time-range">Appointment time</label>
    <span id="validation-time-range-error" class="supporting-text"><i class="material-icons" aria-hidden="true">error</i> Choose a time between 09:00 and 18:00.</span>
</div>

Reference

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.
twelveHour Boolean true Use 12 hour AM/PM clock instead of 24 hour clock.
vibrate Boolean true Vibrate device when dragging clock hand.
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 = 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();