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).