Time picker
Examples#
Base#
<chi-label for="example__base">Label</chi-label>
<chi-time-picker id="example__base"></chi-time-picker>Disabled#
Use the disabled boolean attribute to prevent users from interacting with an input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<chi-label for="example__disabled">Label</chi-label>
<chi-time-picker id="example__disabled" disabled></chi-time-picker>Value option#
<chi-label for="example__value-option">Label</chi-label>
<chi-time-picker id="example__value-option" value="09:00"></chi-time-picker>Seconds#
<chi-label for="example__seconds">Label</chi-label>
<chi-time-picker id="example__seconds" display-seconds></chi-time-picker>24-hour format#
<chi-label for="example__24hour-format">Label</chi-label>
<chi-time-picker id="example__24hour-format" format="24hr"></chi-time-picker>Step#
Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds.
Use the property minutes-step to define the step for the minutes (defaults to 15 minutes)
and the property seconds-step to define the step for the minutes (defaults to 10 seconds).
Minutes step#
<chi-label for="example__minutes-step">Label</chi-label>
<chi-time-picker id="example__minutes-step" minutes-step="20"></chi-time-picker>Seconds step#
<chi-label for="example__seconds-step">Label</chi-label>
<chi-time-picker id="example__seconds-step" seconds-step="30" display-seconds></chi-time-picker>Time#
An example of a time picker not attached to any element.
Base#
Active#
Seconds#
24-hour format#
Step#
Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds.
Use the property minutes-step to define the step for the minutes (defaults to 15 minutes)
and the property seconds-step to define the step for the minutes (defaults to 10 seconds).