Войти

Компонент ввода даты DateInput

Общая информация

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

Поддерживаемые экраны

Компонент может быть задействован на экране типа:

Внешний вид компонента

В услуге

В конструкторе


Структура компонента 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 является указание отрезка времени «с» — «по». В этом случае можно настроить компоненты так, чтобы дата окончания не была раньше чем дата начала. 

Для такой реализации потребуется настройка компонента, в котором указывается дата окончания. Используется блок «Ограничения на вводимую дату (с условием)», а сама настройка выглядит следующим образом. 

Авторизуйтесь, чтобы оставить комментарий к статье