DatePicker
Использование
Компонент DatePicker
представляет собой поле ввода даты с выпадающим календарем.
Размер DatePicker
задаётся с помощью свойства size
.
Возможные значения свойства: "l"
, "m"
, "s"
, "xs"
.
Формат даты
Формат даты задается с помощью свойства format
.
Обозначение | Отображение | Описание |
---|---|---|
DD | 01-31 | Дни месяца, 2 цифры |
D | 1-31 | Дни месяца |
MMMM | January...December / январь...декабрь | Месяц года, полное название |
MMM | Jan...Dec / янв.-дек. | Месяц года, сокращенное название |
MM | 01-12 | Месяц года, 2 цифры |
M | 1-12 | Месяц года |
YYYY | 2024 | Год из 4 цифр |
YY | 24 | Год из 2 цифр |
Q | 1-4 | Квартал |
При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
Свойство maskWithFormat
позволяет маскировать ввод, кроме случаев когда месяц имеет формат полной записи MMMM:
Язык даты
Язык даты задается с помощью свойства lang
.
Обозначение | Отображение | Описание |
---|---|---|
ru | June | Английский Язык |
en | июнь | Русский язык |
По умолчанию используется ru
Валидация и индикация успешного ввода даты.
За индикацию ошибки или успешного ввода отвечают valueError
, valueSuccess
.
В данном примере валидация происходит при нажатии клавиши Enter
после ввода значений:
DatePickerRange
Использование
Компонент DatePickerRange
представляет собой Range
с выпадающим календарем.
Календарь может быть одиночным или двойным. За это отвечает свойство isDoubleCalendar
.
Обязательность поля
Обязательность поля задаётся с помощью свойства required
.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства requiredPlacement
, которое принимает значения left
и right
.