- Діапазон часу
🧬 Складальні компоненти
Діапазон часу
ContributeЯкий проміжок часу?
Діапазон часу — це компонент інтерфейсу користувача, який дозволяє користувачам вибирати проміжок часу з 24-годинного інтерфейсу, Як правило, використовується в формах або інтерфейсах входу даних, де користувачу потрібно вказати початок і закінчення часу.
Коли до полотна додається компонент діапазону часу, він відображає дві 24-годинні інтерфейси поруч. Один інтерфейс використовується для вибору початкового часу, а інший - для вибору кінцевого часу. Користувач може змінити час, переміщуючи курсор миші, або використовуючи стрілки вверх і вниз.
Properties
Властивості використання часового діапазону. JavaScript може бути записаний на читання або зміну інформації про компоненти.
| Властивості | Опис |
|---|---|
| Час початку | Початкове значення часу компонента за замовчуванням |
| Час завершення | Значення кінцевого часу компонента за замовчуванням |
| Форматувати | Дійсний формат дати. Перегляньте https://day.js.org/docs/en/parse/string-format. |
| Запустити заповнювач | Значення буде показано, коли поле вводу стартового часу порожнє. |
| Кінцевий заповнювач | Значення буде показано, коли поле вводу вводу закінчиться порожнє. |
| Розмір кроку | розмір кроку в хвилинах |
| Мітка | Ім’я поля, яке відображається користувачеві |
| Підпис | Заголовок використовується для опису поля докладно |
| Прихована мітка | Вкажіть, чи показувати мітки |
| Позиція | Встановіть позицію мітки щодо компонента |
| Вирівнювання | Задати вирівнювання (по лівому чи правому) мітки |
| Width | Коли етикетка розташована в лівій частині компонента, встановіть співвідношення ширини етикетки. |
| Обробник подій | Тригер запит, компоненти керування, тобто виклик інших API-файлів у відповідь на події компонента. |
| Вимкнено | Керування статусом того, що компонент відключений. Компонент не може бути змінений або змінений, якщо він вимкнений. |
| Підказка | Тут можна ввести підказку для компонентів. Підказка буде відображатись при зосередженні. Формат Markdown підтримується. |
| Показувати кнопку очищення | керувати, показувати кнопку “Очистити чи ні” при введенні |
| Обов’язкове поле | Дійсний лише при увімкненому перемикачі. |
| Користувацьке правило | Тут ви можете створити логіку вашої перевірки. Правила повинні бути зроблені в JavaScript і закриті {{}}. |
| Приховати повідомлення перевірки | Ви можете приховати повідомлення про помилку, перемикнувши прихований статус, коли вхідне значення неправильне. Ви можете динамічно змінити прихований стан на JavaScript. |
| Ключ даних форми | Вкажіть ключ форми обгортання компонентів при конструюванні атрибуту даних. |
| Hidden | Динамічне керування, чи прихований компонент в мережі. Ви можете змінити прихований статус за допомогою динамічного логічного значення. |
| Колір теми | Дозволяє користувачам зазначити колір і непрозорість фону кнопки |
Methods
Ви можете використовувати інші компоненти для керування компонентами. Ми підтримуємо наступні два методи:
- setStartTime
Щоб встановити початкове значення дати, наприклад, {{“value1”}}
| Властивості | Опис |
|---|---|
| Цінність | Вхідне початкове значення часу |
- setEndTime
Щоб встановити кінцеву дату, наприклад, {{“value2”}}
| Властивості | Опис |
|---|---|
| Цінність | Вхідне кінцеве значення часу |
- clearValue
Щоб очистити значення вибраного компонента
- validate
Щоб переконатися, що вхідна інформація є правовою
- очистити дійсність
Щоб очистити повідомлення підтвердження
Обробник подій
| Подія | Опис |
|---|---|
| Змінити | Коли користувач змінить вибране значення часу, виконати певну дію, яку налаштовані користувачами. |
Дані
Компонент має найбільш часто використовувані дані, які можна викликати через {{componentName.propertyName}} в додатку.
| Ім’я властивості | Опис |
|---|---|
| кольорова схема | властивість дати |
| спеціальне правило | власне правило, яке визначено користувачем |
| вимкнуто | логічне значення означає інвалідів статус |
| назва дисплею | ім’я цього компонента (ie cascader1) |
| startTime | початкове значення часу |
| endTime | кінцеве значення часу |
| Стартовий заповнювач | заповнювач значення часу початку |
| endPlaceholder | значення заповнювача для закінчення часу |
| події | значення масиву для послідовності подій |
| формат | формат дати і часу |
| formDataKey | ключ форми дати |
| hidden | логічне значення показує прихований статус кнопки |
| хідна перевірка | логічне значення вказує, чи приховане повідомлення перевірки |
| етикетка | значення мітки |
| позначення | вирівнювання мітки cascader (зліва або праворуч) |
| мітка | позиція мітки cascader (зліва або праворуч) |
| ширина етикетки | ціле число що представляє ширину мітки |
| хвилинний крок | рядкове значення розміру кроку |
| обов’язково | логічне значення вказують на необхідний статус входу. |
| прокрутити | значення логічного значення вказують на погоду, дата буде чітко показана |
| значення | Обране значення |
Приклад: {{rangeTime1.value[0]}}
Використати регістр
Далі, ми продемонструємо, як відобразити дані з джерела даних в проміжок часу і задати кінцеве значення на поточний час кнопкою.
Крок 1 Додати дію
Давайте створимо таблицю в REST API під назвою promoteCodes, включаючи 6 стовпців: code, id, createdAt, expiredAt, startedAt, updatedAt. Ми будемо використовувати початкове представлення і закінчився час для використання зразків.
Потім ми можемо створити нову дію для REST API зі списку дій, перерахуючи всі дані в promoteCodes і name restapi1.
Натисніть Зберегти і Run для активації цієї дії.
Крок 2 додати компоненти
Потім ми можемо додати компонент time range і button для полотна. Для початкового значення часу компонента діапазону дат за замовчуванням, ми використовуємо початковий час роботи першого промо-коду від решти api даних.
{{restapi1.data.promoteCodes[0].startedAt}}Так само для кінцевого значення часу за замовчуванням ми використовуємо застарілий термін виконання першого промо-коду з решти api даних.
{{restapi1.data.promoteCodes[0].expiredAt}}Також ми позначили кнопку як “зараз”, як показано нижче.
Крок 3 налаштувати компонент
Для компонента button ми можемо налаштувати його на встановлення кінцевої дати в час для діапазону компоненту на сьогоднішню дату.
- В обробнику подій виберіть “Елемент управління” в дії, виберіть “проміжок часу компонент, який ви хочете оновити як ціль події.
- Оберіть
setEndTimeдію та встановітьКінець часуяк{{currentUserInfo.updatedAt}}
Крок 4 тест
Тепер, коли ви натиснете кнопку “Зараз”, час закінчення має змінитися на сьогоднішній день. Що стосується цього, то у нас є 20:03:05, але при тестуванні може відрізнятися інакше.
