Time Picker

README

Demo

Components

mdc-time-picker

Implements Material Design 3 Expressive Time pickers: dial and input, vertical and horizontal, 12h and 24h. Hour is always 0..23.

Status

Component	Ready to use
mdc-time-picker	Yes

Disable Elevation

Code

<mdc-time-picker id="time-no-elevation" variant="dial" disable-elevation headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-no-elevation').show()"><span>Open flat picker</span></mdc-button>

Disabled

Code

<mdc-time-picker id="time-disabled" variant="dial" disabled headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-disabled').show()"><span>Open disabled picker</span></mdc-button>

Headline

Code

<mdc-time-picker id="time-headline" variant="dial" headline="Meeting time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-headline').show()"><span>Open custom headline</span></mdc-button>

Hour

Code

<mdc-time-picker id="time-hour" variant="dial" hour="9" minute="30" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-hour').show()"><span>Open at 9:30</span></mdc-button>

Is 24 Hour

Code

<mdc-time-picker id="time-24h" variant="dial" orientation="vertical" headline="Select time" is-24-hour></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-24h').show()"><span>Open 24 hour</span></mdc-button>

Minute

Code

<mdc-time-picker id="time-minute" variant="dial" hour="9" minute="45" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-minute').show()"><span>Open at 9:45</span></mdc-button>

Name

Code

<mdc-time-picker id="time-name" variant="dial" name="appointment-time" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-name').show()"><span>Open named picker</span></mdc-button>

Open

Code

<mdc-time-picker id="time-open" variant="dial" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-open').show()"><span>Open time picker</span></mdc-button>

Orientation

Code

<mdc-time-picker id="time-orientation" variant="dial" orientation="horizontal" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-orientation').show()"><span>Open horizontal</span></mdc-button>

Selection

Code

<mdc-time-picker id="time-selection" variant="dial" selection="minute" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-selection').show()"><span>Open minute select</span></mdc-button>

Variant

Code

<mdc-time-picker id="time-variant-dial" variant="dial" orientation="vertical" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-variant-dial').show()"><span>Open dial picker</span></mdc-button>
<mdc-time-picker id="time-variant-input" variant="input" orientation="vertical" headline="Select time"></mdc-time-picker>
<mdc-button variant="filled" onclick="this.getRootNode().querySelector('#time-variant-input').show()"><span>Open input picker</span></mdc-button>