Компонент для ввода диапазона дат (DateRangeInput)

Скопировать прямую ссылку на статью

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

Компонент DateRangeInput позволяет выбрать диапазон дат или указать его вручную

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

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

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

В услуге

Датареиндж_скрин1.jpg

Датареинж_скрин_2.jpg

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

ДатаРеиндж_3.png

Структура компонента DateRangeInput

ВКУ		JSON
№	В конструкторе	Атрибут	Тип	Описание
1	Идентификатор компонента	id	string	Уникальный идентификатор компонента в JSON
2	Имя компонента	name	string	Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3	Заголовок компонента	label	string	Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле
4	Компонент обязателен для заполнения	required	boolean	Принуждает пользователя к взаимодействию с компонентом
5	Условие сравнения с заданной датой	condition	string	Позволяет выбрать операцию сравнения для создания ограничений на вводимую дату
6	Ссылка/Постоянная величина	type	string	Атрибуты, позволяющие указать ограничение в вводе периода дат. Может принимать одно из двух значений: const — постоянная величина, например, today ref — ссылка на другой компонент услуги, например DateInput
7	Значение	value	string	Позволяет ввести значение, с которым будет сравниваться поле
8	Тип валидации	type	string	Позволяет выбрать один из типов валидации: Валидация даты при заданных ограничениях Регулярное выражение Правила валидации настраиваются совместно с ограничениями на вводимую дату, служат для корректной работы компонента и создания кастомных сообщений об ошибках
9	Условие сравнения	condition	string	Позволяет выбрать условие сравнения, когда применяется валидация
10	Сообщение об ошибке	errorMsg	string	Позволяет указать текст, который выводится пользователю в случае, если значение не соответствует правилу валидации
11	Регулярное выражение	value	string	Позволяет указать регулярное выражение, в соответствии с которым будет осуществляться проверка вводимых данных. Подробнее в статье по регулярным выражениям
12	Подсказка для поля	hint	string	Добавляет текст — подсказку под полем ввода
13	Скрыть поле	hidden	boolean	Если чекбокс установлен, то компонент не отображается на экране
14	Зависимости с ранее введёнными данными	ref	array	Массив объектов, в элементах которых описываются зависимости и правила отображения полей
15	Модальные окна с пояснениями	clarifications	array of objects	Позволяет раскрыть блок «Настроить модальное окно с пояснением вручную» или сделать список ссылок на пояснительные переходы
16	Настроить модальное окно с пояснением вручную	acceptableTypes	additionalProperties	Позволяет настроить модальные окна
17	Отображение компонента в повторяющихся блоках (RepeatableFields)	onlyFirstScreen	boolean	Можно выбрать отображение только в первом блоке или наоборот. Если оставить выпадающий список пустым, то компонент DateRangeInput будет отображаться во всех блоках компонента RepeatableFields
18	Название поля, в которое запишется введённое значение на циклических экранах	fields	array	Используется для сохранения значения в поле элемента спискового компонента, обрабатываемого в цикле
19	Вычисляемые аргументы компонента (linkedValues)	linkedValues	array	Атрибуты компонента, позволяющие реализовать сложный функционал

Пример JSON структуры объекта передаваемой в DTO

{

visited: true,

value: "{"start":"13.06.2023","end":"17.06.2023"}"

}

Варианты использования

Наиболее частым вариантом использования компонента DateRangeInput является указание отрезка времени «с» — «по». В этом случае можно настроить компонент так, чтобы выбранный период входил в определённый промежуток времени. Для такой реализации потребуется настройка компонента, в котором указывается дата начала и дата окончания. Используется блок «Ограничения на вводимую дату» и «Правила валидации», а сама настройка выглядит следующим образом:

реиндж_скрин_4.png

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