timePicker

LIVE DEMO

timePicker lets users enter or select a time.

  • XML element: timePicker

  • Java class: TypedTimePicker

Basics

Time can be entered directly using a keyboard or selected from an overlay with a list of time values. The overlay appears on clicking the field or the clock button.

time picker basic

The following example defines a timePicker of localTime type with a label:

<timePicker id="timePicker" datatype="localTime" label="Appointment time"/>

Data Types

timePicker is a typed component which supports common data types for storing a time value:

  • localTime

  • offsetTime

  • time

To change the type, use the datatype attribute.

Step

The default interval between the items displayed in the overlay is set to one hour. A custom step value can be set using the step attribute.

time picker step 
<timePicker step="30" min="10:00" max="12:00"/>

The step must divide an hour or day evenly. For example, "15 minutes", "30 minutes" and "2 hours" are valid steps, whereas "42 minutes" isn’t.

The overlay doesn’t appear for steps less than 15 minutes, to avoid showing an impractical number of choices.

Theme Variants

Use the themeNames attribute to adjust text alignment, helper text placement, and component size.

Alignment

Choose among three alignment options: align-left (default), align-right, align-center.

time picker alignment
XML code 
<timePicker themeNames="align-left"/>
<timePicker themeNames="align-center"/>
<timePicker themeNames="align-right"/>

Helper Text Position

Setting helper-above-field will move the helper text from its default position below the field to above it.

time picker helper text position
XML code 
<timePicker label="Appointment time:" helperText="Open 8:00 AM - 6:00 PM"/>
<timePicker themeNames="helper-above-field" label="Appointment time:" helperText="Open 8:00 AM - 6:00 PM"/>

Size

Two size options are available: the default size and small.

time picker size
XML code 
<timePicker/>
<timePicker themeNames="small"/>

Time Range

To restrict the input to a specific time range, specify a minimum and maximum value using the max and min attributes.

<timePicker min="08:00" max="18:00"/>

Apply a validator to set a more specific time range.

Attributes

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autoOpen - classNames - clearButtonVisible - colspan - css - dataContainer - datatype - enabled - errorMessage - focusShortcut - height - helperText - label - max - maxHeight - maxWidth - min - minHeight - minWidth - overlayClass - placeholder - property - readOnly - required - requiredMessage - step - tabIndex - themeNames - visible - width

autoOpen

Defines whether the overlay opens when the user interacts with the component.

  • If set to true, the overlay opens on user input and on clicking the clock button or the field.

  • If set to false, the overlay opens only on clicking the clock button.

max

Vaadin

Specifies the latest time that can be selected. Accepted format is hh:mm.

min

Vaadin

Specifies the earliest time that can be selected. Accepted format is hh:mm.

Handlers

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - InvalidChangeEvent - TypedValueChangeEvent - statusChangeHandler - validator

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

ClientValidatedEvent

ClientValidatedEvent is sent by the web component whenever it is validated on the client-side.

InvalidChangeEvent

com.vaadin.flow.component.timepicker.TimePicker.InvalidChangeEvent is sent when the value of the invalid attribute of the component changes.

validator

Adds a validator instance to the component. The validator must throw ValidationException if the value is not valid.

@Install(to = "timePicker", subject = "validator")
private void timePickerValidator(LocalTime value) {
    if (value != null && LocalTime.of(13,0).isBefore(value) && LocalTime.of(14,0).isAfter(value)) {
        throw new ValidationException("No appointments between 13:00 to 14:00.");
    }
}

Elements

tooltip - validator - prefix

prefix

Adds a prefix component inside the field, typically an icon.

time picker prefix
Show XML 
<hbox>
    <timePicker>
        <prefix>
            <icon icon="SUN_O"/>
        </prefix>
    </timePicker>
    <timePicker>
        <prefix>
            <icon icon="MOON"/>
        </prefix>
    </timePicker>
</hbox>

See Also

See Vaadin Docs for more information.