timePicker

timePicker lets users enter or select a time.

XML Element

timePicker

Java Class

TypedTimePicker

Basics

LIVE DEMO

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.

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

<timePicker id="timePicker" label="TimePicker" datatype="localTime"/>

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.

Data-aware timePicker

LIVE DEMO

Use the dataContainer and property attributes to bind timePicker to an entity attribute. The data container provides the entity instance, and property identifies the attribute to edit.

<data>
    <instance id="taskDc"
              class="io.jmix.uisamples.entity.Task"
              fetchPlan="_local"/>
</data>
    <timePicker id="timePicker" label="TimePicker"
                     dataContainer="taskDc" property="dueDate"/>

Step

LIVE DEMO

The default interval between the items displayed in the time overlay is set to one hour. To customize this interval, use the step attribute either in XML or programmatically.

Setting the step attribute in the view descriptor XML:

<timePicker id="timePicker" label="TimePicker" datatype="localTime"
            step="15m"/>

The m suffix specifies minutes.

The step attribute supports flexible time interval configuration using different chrono units. You can specify values with unit suffixes for clarity.

<timePicker step="2h"/> (1)
<timePicker step="1600s"/> (2)
<timePicker step="20m"/> (3)
1 2 hour intervals.
2 1600 second (26m 40s) intervals.
3 20 minute intervals.

This can also be done in the view controller:

@ViewComponent
private TypedTimePicker<Comparable> timePicker;

@Subscribe
public void onInit(InitEvent event) {
    timePicker.setStep(Duration.ofMinutes(30));
}

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.

Time Range

LIVE DEMO

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

@ViewComponent
protected TypedTimePicker<LocalTime> timePicker;

@Subscribe
protected void onInit(InitEvent event) {
    timePicker.setMin(LocalTime.of(8, 0));
    timePicker.setMax(LocalTime.of(17, 0));
}

Apply a validator to set a more specific time range.

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

small

Makes the component smaller.

Aura, Lumo

align-left

Aligns the field value to the left side.

Aura, Lumo

align-center

Centers the field value.

Aura, Lumo

align-right

Aligns the field value to the right side.

Aura, Lumo

helper-above-field

Renders the helper text above the field, below the label.

Aura, Lumo

Attributes

The following attributes are specific to timePicker:

Name Description Default

autoOpen

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

—

max

Specifies the latest time that can be selected.

—

min

Specifies the earliest time that can be selected.

—

The following shared attributes are supported by timePicker:

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

Handlers

The following handlers are specific to timePicker:

Name Description

ClientValidatedEvent

Fired after client-side validation changes the component’s validity.

InvalidChangeEvent

Fired when the component’s invalid state changes.

validator

Validates the component value.

The following shared handlers are supported by timePicker:

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - TypedValueChangeEvent - statusChangeHandler

Elements

A timePicker can include tooltip, validator, and prefix as its nested elements.

See Also