timePicker

timePicker позволяет пользователям вводить или выбирать время.

XML-элемент

timePicker

Java-класс

TypedTimePicker

Основы

ДЕМО

Время можно ввести с клавиатуры или выбрать из всплывающего списка. Список открывается при нажатии на поле или кнопку с часами.

Пример определения timePicker типа localTime с надписью:

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

Типы данных

timePicker поддерживает основные типы данных для хранения времени:

  • localTime

  • offsetTime

  • time

Для изменения типа используйте атрибут datatype.

timePicker связанный с данными

ДЕМО

Используйте атрибуты dataContainer и property, чтобы связать timePicker с атрибутом сущности. Контейнер данных предоставляет экземпляр сущности, а property указывает редактируемый атрибут.

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

Шаг интервала

ДЕМО

По умолчанию интервал между значениями во всплывающем списке равен одному часу. Чтобы изменить его, задайте атрибут step в XML или программно.

Пример установки атрибута step в XML дескрипторе экрана:

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

suffix m обозначает минуты.

Атрибут step поддерживает гибкую настройку интервалов с использованием суффиксов единиц времени.

<timePicker step="2h"/> (1)
<timePicker step="1600s"/> (2)
<timePicker step="20m"/> (3)
1 Интервал 2 часа.
2 Интервал 1600 секунд (26м 40с).
3 Интервал 20 минут.

Аналогично можно настроить в контроллере экрана:

@ViewComponent
private TypedTimePicker<Comparable> timePicker;

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

Шаг должен равномерно делить час или день. Например, "15 минут", "30 минут" и "2 часа" - допустимые значения, а "42 минуты" - нет.

Для шагов менее 15 минут выпадающий список не отображается, чтобы избежать непрактичного количества вариантов.

Ограничение временного диапазона

ДЕМО

Чтобы ограничить ввод диапазоном времени, задайте минимальное и максимальное значения с помощью атрибутов max и min.

@ViewComponent
protected TypedTimePicker<LocalTime> timePicker;

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

Для более точного ограничения диапазона используйте validator.

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

small

Уменьшает размер компонента.

Aura, Lumo

align-left

Выравнивает значение поля по левому краю.

Aura, Lumo

align-center

Выравнивает значение поля по центру.

Aura, Lumo

align-right

Выравнивает значение поля по правому краю.

Aura, Lumo

align-start

Выравнивает значение поля по начальной стороне с учетом текущего направления текста.

Aura

align-end

Выравнивает значение поля по конечной стороне с учетом текущего направления текста.

Aura

helper-above-field

Размещает вспомогательный текст над полем, под меткой.

Aura, Lumo

filled

Применяет стиль с заливкой фона.

Aura

Атрибуты

timePicker имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

autoOpen

Определяет, открывается ли наложение, когда пользователь взаимодействует с компонентом.

—

max

Указывает самое позднее время, которое можно выбрать.

—

min

Указывает самое раннее время, которое можно выбрать.

—

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

Обработчики

timePicker имеет следующие уникальные обработчики:

Имя Описание

ClientValidatedEvent

Возникает после изменения состояния допустимости компонента при проверке на стороне клиента.

InvalidChangeEvent

Возникает при изменении состояния недопустимости компонента.

validator

Проверяет значение компонента.

timePicker имеет следующие общие обработчики:

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

Элементы

Компонент timePicker может содержать следующие вложенные элементы: tooltip, validator, и prefix.

Смотрите также