- Дата
🧬 Складальні компоненти
Дата
ContributeЩо таке дата?
Компонент дати - це компонент, що дозволяє користувачам вибирати дату з інтерфейсу календаря. Компонент дати зазвичай використовується у формах або інтерфейсах входу даних, де користувачу потрібно вибрати певну дату.
Якщо компонент дати додається на полотно, він за замовчуванням відображає інтерфейс календаря. Користувач може переміщатися через календар натиснувши на попередні або поруч стрілок, щоб рухатися на інший місяць, або натисніть на певну дату, щоб вибрати її. Обрана дата буде відображатися в полі введення.
Properties
Характеристики дати доступні. JavaScript може бути записаний на читання або зміну інформації про компоненти.
| Властивості | Опис |
|---|---|
| Значення за замовчуванням | Початкове значення компонента. Ви можете динамічно змінити початкове значення, набравши JavaScript у {{}}. |
| Форматувати | Дійсний формат дати. Див. dayJS. |
| Мітка-заповнювач | Значення буде показано, коли поле вводу порожнє. |
| Максимальна дата | встановити максимальну дату, яку користувач може вибрати з інтерфейсу календаря. |
| Мінімальна дата | вкажіть найранішу дату, яку користувач може обирати з інтерфейсу календаря. |
| Мітка | Ім’я поля, яке відображається користувачеві |
| Підпис | Заголовок використовується для опису поля докладно |
| Прихована мітка | Вкажіть, чи показувати мітки |
| Позиція | Встановіть позицію мітки щодо компонента |
| Вирівнювання | Задати вирівнювання (по лівому чи правому) мітки |
| Width | Коли етикетка розташована в лівій частині компонента, встановіть співвідношення ширини етикетки. |
| Обробник подій | Тригер запит, компоненти керування, тобто виклик інших API-файлів у відповідь на події компонента. |
| Вимкнено | Керування статусом того, що компонент відключений. Компонент не може бути змінений або змінений, якщо він вимкнений. |
| Лише для читання | Керування статусом того, чи є компонент лише для читання. Компонент, який доступний лише для читання, може бути вибраний і сфокусований, але не може бути змінений. |
| Підказка | Тут можна ввести підказку для компонентів. Підказка буде відображатись при зосередженні. Формат Markdown підтримується. |
| Показувати кнопку очищення | керувати, показувати кнопку “Очистити чи ні” при введенні |
| Обов’язкове поле | Дійсний лише при увімкненому перемикачі. |
| Користувацьке правило | Тут ви можете створити логіку вашої перевірки. Правила повинні бути зроблені в JavaScript і закриті {{}}. |
| Приховати повідомлення перевірки | Ви можете приховати повідомлення про помилку, перемикнувши прихований статус, коли вхідне значення неправильне. Ви можете динамічно змінити прихований стан на JavaScript. |
| Ключ даних форми | Вкажіть ключ форми обгортання компонентів при конструюванні атрибуту даних. |
| Hidden | Динамічне керування, чи прихований компонент в мережі. Ви можете змінити прихований статус за допомогою динамічного логічного значення. |
| Колір теми | Дозволяє користувачам зазначити колір і непрозорість фону кнопки |
Methods
Ви можете використовувати інші компоненти для керування компонентами. Ми підтримуємо наступні чотири методи:
- setValue
Щоб встановити вхідне значення дати, наприклад, {{‘value1’}}
| Властивості | Опис |
|---|---|
| Цінність | Input value |
- clearValue
Щоб очистити значення вибраного компонента
- validate
Щоб переконатися, що вхідна інформація є правовою
- очистити дійсність
Щоб очистити повідомлення підтвердження
Обробник подій
| Подія | Опис |
|---|---|
| Змінити | Коли користувач змінює вибране значення дати, виконати певну дію, настроювану користувачами. |
Дані
Компонент має найбільш часто використовувані дані, які можна викликати через {{componentName.propertyName}} в додатку.
| Ім’я властивості | Опис |
|---|---|
| кольорова схема | властивість дати |
| спеціальне правило | власне правило, яке визначено користувачем |
| формат дати | формат дати |
| вимкнуто | логічне значення означає інвалідів статус |
| назва дисплею | ім’я цього компонента (ie button1) |
| formDataKey | ключ форми дати |
| hidden | прихований статус (true чи false) |
| хідна перевірка | логічне значення вказує, чи приховане повідомлення перевірки |
| етикетка | значення мітки |
| позначення | вирівнювання мітки для перемикача (ліворуч або праворуч) |
| мітка | позиція перемикача (ліва чи праворуч) |
| ширина етикетки | ціле число показує ширину мітки. |
| мітка | логічне значення вказує, що мітка переповнена. |
| maxDate | максимальне значення дати |
| minDate | значення мінімальної дати |
| заповнювач | значення місця заповнення |
| тільки для читання | логічне значення показує стан вхідних даних тільки готовим. |
| обов’язково | логічне значення вказують на необхідний статус входу. |
| прокрутити | значення логічного значення вказують на погоду, дата буде чітко показана |
| підказка | значення тексту підказки |
| значення | Input value |
Приклад: {{date1.value}}
Використати регістр
Далі ми продемонструємо, як відмітити початкові дані від даних до дати і встановити поточну дату кнопкою.
Крок 1 Додати дію
Давайте створимо таблицю в REST API під назвою promoteCodes, включаючи 6 стовпців: code, id, createdAt, expiredAt, startedAt, updatedAt. Ми будемо використовувати час оновлення для використання зразка.
Потім ми можемо створити нову дію для REST API зі списку дій, перерахуючи всі дані в promoteCodes і name restapi1.
Натисніть Зберегти і Run для активації цієї дії.
Крок 2 додати компоненти
Далі, ми можемо додати компонент date і button на полотно. Для значення компонента за замовчуванням вказаного в якості останнього часу оновлення перший пратегації коду з інших api даних.
{{restapi1.data.promoteCodes[0].updatedAt}}Ми також позначили кнопку як “Сьогодні”, як показано нижче
Крок 3 налаштувати компонент
Для компоненту button ми можемо налаштувати його на встановлення дати в date компоненті сьогоднішньої дати.
- У обробнику подій виберіть
елемент управлінняв дії, виберіть `дату компонент, який ви хочете оновити як ціль події. - Оберіть
setValueдію та встановіть значення як{{currentUserInfo.updatedAt}}
Крок 4 тест
Тепер, коли ви натискаєте на кнопку “сьогодні”, час повинен змінитися на сьогоднішній день. Що стосується цього, то ми маємо 2023-6, але це може відрізнятися, якщо ви тестуєте його.
