DatePicker
Использование
Компонент DatePicker представляет собой поле ввода даты с выпадающим календарем.
Размер компонента
Размер DatePicker задаётся с помощью свойства size.
Возможные значения свойства: s
Формат даты
Формат даты задается с помощью свойства 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 после ввода значений:
Обязательность поля
Наличие индикатора регулируется свойством hasRequiredIndicator.
Обязательность поля задаётся с помощью свойства required.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства requiredPlacement, которое принимает значения left и right.
DatePickerRange
Компонент DatePickerRange представляет собой Range с выпадающим календарем.
Календарь может быть одиночным или двойным. За это отвечает свойство isDoubleCalendar.
Контролируемый вариант компонента
- DatePicker
- DatePickerRange
Для передачи текущего значения необходимо использовать свойство value.
Чтобы отслеживать изменения, полученные в поле ввода необходимо использовать onChangeValue.
Свойство onCommitDate вызывается, когда выбор даты сделан с помощью выпадающего календарая
или же в поле ввода введена корректная дата.
Для передачи текущего значения необходимо использовать свойство value - принимает массив из двух значений.
Чтобы отслеживать изменения, полученные в полях ввода необходимо использовать onChangeFirstValue и onChangeSecondValue соответственно.
Свойства onCommitFirstDate вызывается для первого значения, а onCommitSecondDate для второго, когда выбор даты сделан с помощью выпадающего календарая
или же в соответствующем поле ввода введена корректная дата.