dateTimePicker

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

XML-элемент

dateTimePicker

Java-класс

TypedDateTimePicker

Основы

ДЕМО

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

В следующем примере определяется компонент dateTimePicker с меткой:

<dateTimePicker id="dateTimePicker" label="DateTimePicker" datatype="localDateTime"/>

Типы данных

dateTimePicker - это типизированный компонент, который поддерживает общие типы данных для хранения как даты, так и времени:

  • date

  • dateTime

  • localDateTime

  • offsetTime

  • localTime

  • offsetDateTime

  • time

  • localDate

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

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

ДЕМО

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

В следующем примере создаётся компонент dateTimePicker, работающий с данными:

<data>
    <instance id="taskDc"
              class="io.jmix.uisamples.entity.Task"
              fetchPlan="_local"/>
</data>
<layout>
    <dateTimePicker id="dateTimePicker" label="DateTimePicker"
                     dataContainer="taskDc" property="dueDate"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

Шаг

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

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

<dateTimePicker step="2h"/> (1)
<dateTimePicker step="1600s"/> (2)
<dateTimePicker step="20m"/> (3)
<dateTimePicker step="30"/> (4)
1 Интервалы в 2 часа.
2 Интервалы в 1600 секунд (26 минут 40 секунд).
3 Интервалы в 20 минут.
4 Число без суффикса означает минуты.

То же самое можно сделать в контроллере экрана:

@ViewComponent
private TypedDateTimePicker dateTimePicker;

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

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

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

Формат даты

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

Чтобы изменить формат для конкретного компонента, используйте его атрибут dateFormat.

ДЕМО

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

<dateTimePicker min="2024-01-01T10:30:00" max="2024-12-31T20:30:00"/>

Или укажите адаптируемый диапазон даты и времени внутри контроллера экрана:

@ViewComponent
protected TypedDateTimePicker<LocalDateTime> dateTimePicker;

@Subscribe
protected void onInit(InitEvent event) {
    dateTimePicker.setMin(LocalDateTime.now().minusWeeks(1));
    dateTimePicker.setMax(LocalDateTime.now().plusWeeks(1));
}

Валидация

Чтобы проверить значения, введённые в dateTimePicker, добавьте элемент валидатор. Это позволяет добавить пользовательский критерий проверки или выбрать один из следующих предопределённых валидаторов:

Этот пример демонстрирует, как использовать FutureValidator, чтобы убедиться, что выбранные дата и время находятся в будущем:

<dateTimePicker label="Select a future date and time">
    <validators>
        <future/>
    </validators>
</dateTimePicker>

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

ДЕМО

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

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

small

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

Aura, Lumo

align-left

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

Aura, Lumo

align-center

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

Aura, Lumo

align-right

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

Aura, Lumo

helper-above-field

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

Aura, Lumo

Атрибуты

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

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

autoOpen

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

—

datePlaceholder

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

—

max

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

—

min

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

—

timePlaceholder

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

—

dateTimePicker имеет следующие общие атрибуты:

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

Обработчики

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

Имя Описание

ClientValidatedEvent

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

validator

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

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

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

Элементы

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

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