Общая информация
Поддерживаемые экраны
Компонент может быть задействован на экране типа:
Внешний вид компонента
В услуге
В конструкторе
Структура компонента DateInput
ВКУ |
JSON |
|||
№ |
В конструкторе |
Атрибут |
Тип |
Описание |
1 |
Идентификатор компонента |
id |
string |
Уникальный идентификатор компонента в JSON |
2 |
Удобочитаемое имя компонента |
Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент |
||
3 |
Заголовок компонента |
label |
string |
Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле |
4 |
Поле является обязательным? |
required |
bool |
Признак обязательности ввода/выбора данных в компоненте. По умолчанию (если флаг не выставлен) ввод/выбор данных в компоненте необязателен. При выставлении флага required в значение false ввод/выбор данных в компоненте становится обязательным |
5 |
Точность сравнения |
accuracy |
string |
Точность сравнения дат для элементов типа minDate, maxDate и equalsDate в блоке validation. Возможные значения: year, month, day |
6 |
Ограничения на вводимую дату |
dateRestrictions |
object |
Атрибуты, позволяющие указать ограничение в вводе даты. type может принимать одно из двух значений: • const: постоянная величина, например today • ref: ссылка на другой компонент dateInput услуги |
7 |
Правила валидации |
validation |
array of objects |
Валидация будет происходить в зависимости от выбранной точности сравнения (accuracy). В случае year и выбранным типом валидации максимальная дата при текущей дате 28.12.2022 будет доступна дата до 01.01.2022, если month, то до 01.12.2022, а в случае с day, то до 28.12.2012 |
8 |
Установить зависимость с ранее введёнными данными |
ref |
array of objects |
Массив объектов, в элементах которых описываются зависимости и правила отображения полей |
9 |
Подсказка для поля |
string |
Подсказка к полю |
|
10 |
Пояснительные переходы |
Создание модального окна (поп-ап) |
||
11 |
Скрыть поле? |
hidden |
boolean |
Если true - компонент скрывается |
12 |
Идентификатор подсказки |
suggestionID |
string |
Технология автозаполнения полей на основе данных, которые пользователь ранее вводил в поле услуги с — stay_from по — stay_to |
13 |
Вычисляемые аргументы компонента (linkedValues) |
attrs |
object |
Атрибуты компонента, позволяющие реализовать сложный функционал |
Пример JSON структуры компонента передаваемой в DTO
{ visited: true, value: "2016-07-07T00:00:00.000+03:00" } |
Компонент является вложенным — можно использовать в CalendarInput.
Валидация — обязательный блок элементов.
Для корректной валидации на стороне клиента, в массив validation нужно добавить элемент с type: 'Date' и одним из четырех condition ('>', '<', '<=', '>=') на каждое необходимое условие.
Если не прописать валидацию, компонент не распознает ошибку и соответственно не выдаст ее пользователю.
Сообщение по умолчанию, в случае ошибки: «Введите корректную дату по отношению к другим датам». Сообщение можно кастомизировать, отредактировав поле с сообщением об ошибке.
Варианты использования
Наиболее часто встречающимся вариантом использования двух компонентов DateInput является указание отрезка времени «с» — «по». В этом случае можно настроить компоненты так, чтобы дата окончания не была раньше чем дата начала.
Для такой реализации потребуется настройка компонента, в котором указывается дата окончания. Используется блок «Ограничения на вводимую дату (с условием)», а сама настройка выглядит следующим образом.