- Выбор времени
🧬 <unk> ble компоненты
Выбор времени
ContributeЧто такое выбор времени?
Компонент выбора времени это UI компонент, который позволяет пользователям выбрать определенное время из 24-часового интерфейса, обычно используется в формах или интерфейсах ввода данных, где пользователь должен указать определенное время.
При добавлении компонента выбора времени в холст отображается 24-часовой интерфейс, показывающий часы, минуты и секунды. Пользователь может настроить время, перемещая курсор мыши или используя стрелки вверх и вниз.
Properties
Доступные свойства выбора времени. JavaScript может быть написан на чтение или изменение информации о компонентах.
| Свойства | Описание |
|---|---|
| Значение по умолчанию | Начальное значение компонента. Вы можете динамически изменить начальное значение, введя JavaScript в {{}}. |
| Формат | Правильная строка формата даты. См. dayJS. |
| Заполнитель | Значение будет показано, когда поле ввода пустое. |
| Размер шага | размер шага в минутах |
| Метка | Имя поля, отображаемого пользователю |
| Подпись | Заголовок, используемый для описания поля в деталях |
| Скрытая метка | Выберите, показывать ли метку |
| Позиция | Установить положение метки относительно компонента |
| Выравнивание | Установить выравнивание (выравнивание влево или вправо) метки |
| Width | Когда ярлык находится в левой части компонента, установите ширину метки. |
| Обработчик событий | Триггеры запросов, управляющих компонентов или вызвать другие API в ответ на события компонента. |
| Отключено | Контролировать состояние отключения компонента. Компонент не может быть изменен или сфокусирован, если он отключен. |
| Только для чтения | Контролировать статус только для чтения. Компонент доступен только для чтения, но его нельзя изменить. |
| Подсказка | Пользователи могут ввести подсказку компонента здесь. Подсказка будет показана при фокусировке. Поддерживается формат Markdown. |
| Показать кнопку “Очистить” | контролировать, отображается ли кнопка “Очистить” в поле ввода |
| Подсказка | Здесь пользователь может ввести подсказку компонента. Подсказка будет показана при фокусировке. Поддерживается формат Markdown. |
| Обязательное поле | Действителен только когда выключатель включен. |
| Пользовательское правило | Создайте логику проверки здесь. Правила должны быть сделаны в JavaScript и покрыты {{}}. |
| Скрыть сообщение проверки | Вы можете скрыть сообщение об ошибке, переключившись на скрытый статус, когда введенное значение неверно. Вы можете динамически изменить скрытый статус с помощью JavaScript. |
| Ключ данных формы | Укажите ключ компонента оберточной формы при создании атрибута данных. |
| Hidden | Динамическое управление скрытием компонента. Вы можете изменить скрытый статус через динамическое логическое значение. |
| Цвет темы | Позволяет пользователям указывать цвет фона и прозрачность кнопки |
Methods
Вы можете использовать другие компоненты для управления компонентом. Мы поддерживаем следующие четыре метода:
- setValue
Чтобы установить входное значение, например, {{“value1”}}
| Свойства | Описание |
|---|---|
| Значение | Input value |
- clearValue
Чтобы очистить значение выбранного компонента
- validate
Чтобы убедиться, что введенная информация является законной
- clearValidate
Чтобы очистить сообщение проверки
Обработчик события
| Событие | Описание |
|---|---|
| Изменить | Когда пользователь изменяет выбранное значение времени, выполните определенное действие, настроенное пользователями. |
Данные
Компонент имеет несколько распространенных данных, которые можно вызвать через {{componentName.propertyName}} в приложении.
| Название свойства | Описание |
|---|---|
| цветовая схема | цвет свойства даты |
| настраиваемое правило | указанное пользователем правило |
| отключено | логическое значение указывает на отключенный статус |
| отображаемое имя | название этого компонента (например кнопка) |
| события | значение массива для последовательности событий |
| формат | форма даты и времени |
| formDataKey | ключ данных формы даты |
| hidden | скрытый статус (true или false) |
| скрыть проверку сообщения | логическое значение указывает, скрыто ли сообщение проверки |
| этикетка | значение метки |
| выровнять метку | выравнивание ярлыка переключателя (влево или вправо) |
| пометка этикетки | положение метки переключателя (влево или вправо) |
| ширина этикетки | целое число, представляющее ширину метки. |
| этикетка заполнена | логическое значение указывает, если метка заполнена. |
| минутшаг | шаг за шагом |
| плейсхолдер | значение заполнителя |
| обязательный | логическое значение указывает на требуемый статус ввода. |
| показать очистку | логическое значение, указывающее на дату будут показаны ясными |
| tooltipТекст | значение текста подсказки |
| значение | Введите дату и время |
Пример: {{timePicker1.format}}
Вариант использования
Далее, мы покажем, как сопоставить данные из источника данных в выборку времени и установить текущее время кнопкой.
Шаг 1 Добавить действие
Давайте создадим таблицу в REST API promoteCodes, с 6 столбцами: code, id, createdAt, expiredAt, startedAt, updatedAt. Мы будем использовать updatedAt time для использования образцов.
Затем мы можем создать новое действие для REST API из списка действий, перечислив все данные в promoteCodes и названные restapi1.
Нажмите Сохранить и Выполнить для активации этого действия.
Шаг 2 Добавление компонентов
Далее на холст можно добавить компонент time picker и компонент button. Для значения по умолчанию компонента времени мы настроили его в качестве последнего обновления первого промо-кода из остальных api данных.
{{restapi1.data.promoteCodes[0].updatedAt}}Мы также назвали кнопку “Сейчас”, как показано ниже
Шаг 3 Настройка компонента
Для компонента button мы можем настроить его, чтобы установить дату в компоненте time picker на текущую дату и время.
- В обработчике события Редактирование выберите `Control component в действии, выберите компонент
time picker, который вы хотите обновить в качестве цели события. - Выберите действие
setValueи установите значение{{currentUserInfo.updatedAt}}
Шаг 4 Тест
Теперь, когда вы нажимаете кнопку “Сейчас”, время должно измениться на текущее время. Что касается здесь, мы имеем 20:03:05, но это может быть иным, когда вы тестируете его.
