datePicker

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

XML-элемент

datePicker

Java-класс

TypedDatePicker

Основы

ДЕМО

В отличие от обычного поля ввода, datePicker содержит кнопку и всплывающий календарь. Календарь открывается при нажатии на кнопку или поле, а также при вводе даты.

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

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

<datePicker id="datePicker" label="DatePicker" datatype="localDate"/>

Типы данных

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

  • date

  • dateTime

  • localDateTime

  • offsetDateTime

  • localDate

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

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

ДЕМО

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

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

<data>
    <instance id="orderDc"
              class="io.jmix.uisamples.entity.Order"
              fetchPlan="_local"/>
</data>
<layout>
    <datePicker id="datePicker" label="DatePicker"
                     dataContainer="orderDc" property="date"/>
    <hbox>
        <span text="Value in the container:"/>
        <span id="spanValue"/>
    </hbox>
</layout>

Формат даты

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

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

ДЕМО

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

<datePicker id="datePicker" min="2024-01-01" max="2024-12-31"/>

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

@ViewComponent
protected TypedDatePicker<LocalDate> datePicker;

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

Валидация

Чтобы проверять значения, введённые в datePicker, добавьте элемент валидатор. Можно задать пользовательский критерий проверки или выбрать один из стандартных валидаторов:

В следующем примере FutureValidator проверяет, что выбранная дата находится в будущем:

<datePicker label="Select a future date"
            datatype="date">
    <validators>
        <future/>
    </validators>
</datePicker>

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

ДЕМО

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

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

small

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

Aura, Lumo

align-left

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

Aura, Lumo

align-center

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

Aura, Lumo

align-right

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

Aura, Lumo

helper-above-field

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

Aura, Lumo

Атрибуты

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

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

autoOpen

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

—

max

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

—

min

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

—

name

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

—

opened

Указывает, открывается ли наложение календаря.

—

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

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

Обработчики

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

Имя Описание

ClientValidatedEvent

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

InvalidChangeEvent

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

OpenedChangeEvent

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

validator

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

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

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

Элементы

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

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