timePicker

ДЕМО

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

  • XML-элемент: timePicker

  • Java-класс: TypedTimePicker

Основы

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

time picker basic

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

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

Типы данных

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

  • localTime

  • offsetTime

  • time

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

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

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

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

<timePicker step="30"
            min="10:00"
            max="12:00"/> (1)
1 Число без суффикса означает минуты.
time picker step

Атрибут 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 минут выпадающий список не отображается, чтобы избежать непрактичного количества вариантов.

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

Используйте атрибут 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

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

Для ограничения ввода временного диапазона укажите: минимальное значение через атрибут min и максимальное значение через атрибут max.

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

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

Атрибуты

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

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

  • При значении true - открывается при вводе и при клике на кнопку часов или на поле.

  • При значении false - открывается только при клике на кнопку часов.

max

Vaadin

Задает самое позднее доступное для выбора время в формате чч:мм.

min

Vaadin

Задает самое раннее доступное для выбора время в формате чч:мм.

Обработчики

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

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

ClientValidatedEvent

Событие ClientValidatedEvent генерируется веб-компонентом при клиентской валидации.

InvalidChangeEvent

com.vaadin.flow.component.timepicker.TimePicker.InvalidChangeEvent возникает при изменении значения атрибута invalid.

validator

Добавляет экземпляр валидатора. Валидатор должен выбрасывать ValidationException при недопустимом значении.

@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.");
    }
}

Элементы

tooltip - validator - prefix

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

Смотрите документацию Vaadin для получения дополнительной информации.