Компонент Date & Time

🌐 Цей документ доступний українською та англійською мовами. Використовуйте перемикач у правому верхньому куті, щоб змінити версію.

1. Опис компонента

Компонент DateTime є елементом інтерфейсу для роботи з датою та часом.

Використовуйте DateTime з переліку Оновлених компонентів.

2. Основні функції

Компонент DateTime підтримує велику кількість опцій для застосування при взаємодії із формою процесу, які розподілені за вкладками.

  • Display

  • Date

  • Time

  • Data

  • Validation

  • API

  • Conditions

  • Table

  • Label: назва компонента, яка відображається поряд з ним.

  • Label Position: визначає положення назви відносно компонента (верх, праворуч, зліва, або внизу).

    • Для опцій Left (Left-aligned), Left (Right-aligned), Right (Left-aligned), Right (Right-aligned).

      • Label Width: встановлює ширину яку займає Label у відсотках відносно input.

      • Label Margin: встановлює відступ між Label та input у відсотках.

  • Allow Manual Input: дозволяє користувачеві вручну вводити дату.

  • Format: формат дати для відображення значення дати й часу. За замовчуванням yyyy-MM-dd HH:mm. Використовуйте формати, надані DateParser Codes

  • Placeholder: це текст, який відображається у полі коли воно пусте (незаповнене).

  • Description: опис компонента, який може допомогти користувачам зрозуміти його призначення.

  • Tooltip: текст, який відображається при наведенні курсора на компонент.

  • Tab Index: html атрибут який дозволяє контролювати навігацію по полям вводу за допомогою клавіатури. Детальніше можна почитати про нього в документації по html наприклад тут.

  • Hidden: поля, які приховані від користувача, але все ще є частинами форми й будуть передані при відправленні форми. Не забудьте прибрати прапорець в Clear when hidden, інакше будь-яке значення цього компонента буде порожнім.

  • Disabled: забороняє редагування.

  • Enable Date Input: дозволяє вводити дату для цього поля.

  • Use calendar to set minDate: дозволяє використовувати календар для встановлення мінімальної дати.

  • Use calendar to set maxDate: дозволяє використовувати календар для встановлення максимальної дати.

  • Custom Disabled Dates: вимкнути певні дати або дати за діапазоном за допомогою функцій. Детальніше Custom Disabled Dates

  • Disable weekends: вимкнути вихідні дні

  • Disable weekdays: вимкнути робочі дні

  • Enable Time Input: дозволяє вводити час для цього поля.

  • Default Value: значення за замовчуванням.

  • Clear value when hidden: дозволяє налаштувати очищення значення компоненту, коли компонент стає прихованим на сторінці.

  • Custom default value: дозволяє налаштувати власне, користувацьке значення за замовчуванням для компонента. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Calculated value: дозволяє обчислювати значення компонента на підставі інших даних або умов. На відміну від Custom default value, значення поля буде обчислюватись кожного разу, коли відбуваються будь-які зміни на формі - користувач вводить данні, завершуються за http запити. У цій функції використовується JS вставка. Детальніше про JS вставки.

    • JavaScript: налаштовуйте власне значення за до допомогою javascript

    • JSONLogic: налаштовуйте власне значення за до допомогою JSONLogic.

  • Allow manual override of calculated value: дозволяє користувачам вручну перевизначити обчислене значення компонента.

  • Validate On: визначає, коли цей компонент повинен активувати валідацію на клієнті (опції Зміна або Розмиття).

  • Required: поле обов’язкове для заповнення перед відправленням форми.

  • Custom error message: спеціальне повідомлення про помилку, яке відображається, коли дані не проходять валідацію.

  • Custom validation: власна валідація, яка дозволяє вам створити специфічні для ваших потреб перевірки на валідність. У цій функції використовується JS вставка. Детальніше про JS вставки.

  • Property Name: ім’я поля в структурі даних, яка буде відправлена при відправці даних форми. Також це ім’я поля в структурі даних яким предзаповнюється форма. Поточне значення цього поля можна перевірити в структурі даних, яка відображається на вкладці Запит в інтерфейсі розробки форм.

  • Advanced Conditions: дозволяють вам налаштовувати складні умови для компонента. Ці умови визначають, коли компонент стає, наприклад. видимим, базуючись на інших компонентах або їх значеннях на формі.

    Ця функція використовує JS-вставки. Детальніше про це див. на сторінці JS-вставки.

  • Simple: виконує тіж самі задачі, що і Advanced Conditions, але дозволяє задати умови в більш простому форматі

  • Table View: визначає, чи відображувати елемент в таблиці та в EditGrid.

  • Table column width: дозволяє налаштовувати ширину стовпця у таблиці, яка відображається під час використання компонента в EditGrid.

  • Sort As Number: визначає, чи сортувати значення як строку або як число при використані компонента в EditGrid.

3. Формат даних

Submission
String
// Формат: YYYY-MM-DD | YYYY-MM-DDTHH:mm:ss.sss
// Приклад: '2021-02-16'
Не використовуйте об’єкт moment та Date як значення дати, на сервер ви завжди повинні відправити String формат, як вказано в прикладі. Для moment завжди викликайте функцію format() яка повертає відформатовану дату типу String.

4. Сценарії використання

У цих функціях використовується JS вставка. Див.

4.1. Custom Disabled Dates

Вимкнути для вибору всі вихідні дні

date.getDay() === 0 || date.getDay() === 6

Вимкнути дати після сьогоднішньої (включаючи сьогоднішню). Тут ми використовуємо бібліотеку moment.js для аналізу, перевірки, обробки та форматування дат. Дивіться більше методів у momentjs docs.

moment(date).isSameOrAfter(moment(), 'day')

4.2. Custom Validation

Ви повинні призначити змінну valid як true, або як повідомлення про помилку(текст помилки можливо вказати в умові або в полі Custom Error Message), якщо перевірка не вдається. Для того щоб проводити будь-які операції з датами, такі як порівняння, необхідно спочатку перетворити значення поля input на об’єкт Date.

// в цьому кейсі текст помилки буде братися з поля Custom Error Message
valid = new Date(input) > new Date(data.datetimeLatest)
// в цьому кейсі, якщо valid буде false, користувачу відобразиться помилка error message
valid = new Date(input) > new Date(data.datetimeLatest) ? 'error message'

4.3. Custom Default Value

Встановити дефолтним значення завтрашню дату

value = moment().add(1,'days').format();