Поле часу
Збирайте час точно та легко. Від планування зустрічей до вибору зміни за допомогою елегантних вбудованих інструментів вибору часу, розумних інтервалів та гнучкого форматування – поле «Час» забезпечує перевірку, налаштування та безперебійний користувацький інтерфейс.
Розумний збір даних про час із вбудованою валідацією
Ідеально підходить для:
Потужні функції для будь-якого випадку використання
🕐 Гнучкі формати часу
24-годинний або 12-годинний дисплей
Оберіть формат, який відповідає вашій аудиторії. Використовуйте 24-годинний військовий час (14:30) для міжнародних користувачів або 12-годинний з AM/PM (2:30) для ознайомлення.
Автоматичне перетворення формату
Поле автоматично обробляє перетворення формату – користувачі бачать бажаний формат, тоді як ваша система отримує узгоджені дані.
Приклади:
- Робочий час: 9:00 – 17:00 (цілодобово)
- Міжнародне розклад: 09:00 – 17:00 (цілодобово)
- Медичні прийоми: 14:30 (з точністю до 24 годин)
⏰ Розумні часові інтервали
Точність вибору керування
Встановіть рівень деталізації вибору часу. Вибирайте інтервали від щохвилини до щогодини залежно від ваших потреб.
Доступні інтервали:
- Щохвилини (12:00, 12:01, 12:02…) – Максимальна точність
- Кожні 5 хвилин (12:00, 12:05, 12:10…) – Стандартні зустрічі
- Кожні 10 хвилин (12:00, 12:10, 12:20…) – Швидке бронювання
- Кожні 15 хвилин (12:00, 12:15, 12:30…) – Найчастіше
- Кожні 30 хвилин (12:00, 12:30, 1:00…) – Півгодинні інтервали
- Щогодини (12:00, 1:00, 2:00…) – Простий вибір
Чому це важливо:
Менше варіантів = швидший вибір. Підберіть інтервали відповідно до ваших потреб у плануванні для кращого UX.
🎯 Обмеження часових діапазонів
Встановити найраніший та найпізніший час
Обмежте доступний час відповідно до робочих годин, розкладу подій або операційних вікон. Користувачі не можуть вибирати час поза визначеним діапазоном.
Розумна перевірка
Перевірка на рівні браузера запобігає надсиланню недійсних запитів до того, як користувачі натиснуть кнопку «Надіслати».
Використовуйте випадки:
- Робочий час: лише з 9:00 до 6:00
- Вечірні заходи: Тільки після 5:00
- Ранкові проміжки: Тільки до 12:00
- Нічна зміна: 10:00 – 6:00
Приклади:
- Бронювання столиків у ресторані: Мін. 11:00, Макс. 10:00
- Заняття у спортзалі: Мін. 6:00, Макс. 9:00
- Години роботи служби підтримки: Мін. 8:00, Макс. 5:00
🔧 Параметри часу за замовчуванням
Три розумні початкові цінності:
1. Пусто (без значення за замовчуванням)
Користувачі починають з порожнього поля – найкраще, коли час завжди унікальний.
2. Поточний час
Автоматично заповнюється поточним часом під час завантаження форми – ідеально підходить для полів «час інциденту» або позначки часу.
3. Власний час
Попередньо виберіть певний час, наприклад, «9:00 ранку», щоб переглянути запропонований час зустрічі або типові варіанти.
Коли використовувати кожен:
- Пусто – час початку події, особисті розклади
- Поточний – Позначки часу звіту, час реєстрації
- Налаштування – Пропонований час зустрічей, години за замовчуванням
⚡ Точність до секунд (необов'язково)
Додайте секунди, коли це необхідно
Увімкніть поле секунд (ГГ:ХХ:СС) для точного відстеження часу. Ідеально підходить для забігів на час, секундомірів та точних позначок часу.
Приклади форматів:
- Без секунд: 14:30 або 2:30
- З секундами: 14:30:45 або 2:30:45
Ідеально для:
- Спортивний хронометраж та результати перегонів
- Наукові експерименти
- Точні системи лісозаготівлі
- Подання заявок на участь у змаганнях з розривом
🔀 Умовна логіка
Динамічні часові поля
Показуйте або приховуйте поле часу на основі інших значень форми. Створюйте інтелектуальні форми, які адаптуються до введених користувачем даних.
Правила розширеної логіки:
- Логіка «І» – усі умови мають бути виконані
- Логіка АБО – будь-яка умова може викликати дію
- 8 операторів – Дорівнює, Не дорівнює, Більше ніж, Менше ніж, Містить, Пусто та інші
Використовуйте випадки:
- Показувати «Бажаний час дзвінка» лише тоді, коли вибрано «Зв’язатися телефоном»
- Відображати «Час початку події», коли тип події дорівнює «Налаштована подія»
- Приховати «Час доставки», якщо спосіб доставки – «Стандартна доставка»
- Показувати «Час зустрічі», коли тип зустрічі дорівнює «Очно»
🎨 Покращений користувацький досвід
Активація одним кліком
Клацніть будь-де на полі, щоб відкрити вбудований засіб вибору часу – більша цільова область, краща зручність використання.
Вибір часу рідним
Використовує вбудований у браузер селектор часу зі знайомими, оптимізованими для платформи інтерфейсами (колесо iOS, годинник Android, випадаючий список на робочому столі).
Оптимізовано для мобільних пристроїв
Зручний вибір часу за допомогою сенсорного керування за допомогою рідних мобільних клавіатур та інструментів вибору.
Додаткові можливості:
- Користувацькі CSS-класи для стилізації
- Режим прихованого поля для системного часу
- Підтримка доступності (мітки ARIA)
- Кнопка очищення для легкого скидання
- Обов'язкова перевірка поля
- Підтримка тексту-заповнювача
Просте налаштування за 3 кроки
Підготуйте своє Поле Часу за лічені хвилини
Додати поле часу
Перетягніть поле «Час» з розділу «Основні поля» у форму.
Налаштування формату та інтервалів
Виберіть 12-годинний або 24-годинний формат, встановіть часові інтервали (кожні 15 хвилин, 30 хвилин тощо) та за бажанням додайте мінімальні/максимальні часові обмеження.
Встановити час за замовчуванням
Виберіть, чи поле починається з порожнього, з поточного часу чи з власного часу, який ви вкажете. Увімкніть секунди, якщо вам потрібен точний час.
???? От і все! Ваше поле часу готове з інтелектуальним форматуванням та перевіркою.
Програми реального світу
Сервіс та бронювання
* Час обслуговування автомобіля
* Розклад перегляду нерухомості
* Час бронювання турів
* Слоти для бронювання об'єктів
Бронювання занять та заходів
* Розклад занять фітнесом
* Розклад тренувань
* Часові інтервали для групових занять
* Уподобання щодо часу уроку
Операції з бізнесу
* Час початку/закінчення зміни
* Подання графіків роботи
* Координація часу зустрічей
* Вибір часу доступності
Призначення бронювання
* Планування медичних зустрічей
* Забронювання салонів та спа-салонів
* Вибір часу консультації
* Запити на призначення послуг
Реєстрація події
* Час початку/закінчення події
* Налаштування часу сеансу
* Часові інтервали для семінарів
* Вибір розкладу конференції
Доставка та самовивіз
* Часові вікна доставки їжі
* Час видачі товарів з магазину
* Розклад видачі замовлень на виїзді
* Налаштування слота доставки
Заповніть параметри поля
Основна конфігурація
- Мітка поля – заголовок, що відображається над полем часу
- Опис/Довідковий текст – Додаткові інструкції для користувачів
- Обов’язкове поле – Зробіть вибір часу обов’язковим
- Текст-заповнювач – текст підказки, перш ніж користувачі виберуть час
Налаштування формату часу
- Формат відображення
- 24-годинний формат (14:30)
- 12-годинний формат годинника з AM/PM (2:30)
Точність та інтервали
- Часові інтервали
- Кожну хвилину
- Кожні 5 хвилин
- Кожні 10 хвилин
- Кожні 15 хвилин (найпопулярніший)
- Кожні 30 хвилин
- Щогодини
Показувати секунди – Додати поле секунд для точного часу (ГГ:ХХ:СС)
Обмеження в часі
- Найраніший дозволений час (хв.) – Користувачі не можуть вибирати час до цього часу.
- Найновіший дозволений час (максимум) – Користувачі не можуть вибирати час після цього
Значення за замовчуванням
- Вибір часу початку
- Немає попередньо вибраного часу (порожнє)
- Поточний час (динамічний – завантажується при відкритті форми)
- Власний час (конкретний час, який ви встановлюєте)
Власний час початку – виберіть конкретний час для попереднього заповнення (якщо вибрано опцію «Власний»)
Умовна логіка
- Увімкнути умовну логіку – показувати/приховувати на основі умов
- Логічний тип
- Усі умови мають бути виконані (ТА)
- Будь-яка умова може бути виконана (АБО)
- Правила умов
- Показати/Приховати – Дія, яку потрібно виконати
- Поле – яке поле перевіряти
- Оператор – Дорівнює, Не дорівнює, Містить, Більше ніж, Менше ніж, Пусто, Не пусто
- Значення – значення порівняння
- Кілька умов – додавання необмеженої кількості правил
Додаткові параметри
- Режим прихованого поля – Використовувати як приховане поле із попередньо встановленим значенням
- Користувацькі CSS-класи – Застосування власного стилю
- Атрибути доступності – мітки та описи ARIA
Чому варто обрати саме нашу сферу послуг?
✅ Інтуїтивно зрозумілий – вбудовані засоби вибору браузера забезпечують звичний інтерфейс
✅ Гнучкий – 12-годинний або 24-годинний формат відповідає вподобанням користувача
✅ Точність – налаштування інтервалів від кожної хвилини до кожної години
✅ Розумне керування – обмеження за мінімумом/максимумом запобігають неправильному вибору часу
✅ Динамічний – умовна логіка створює адаптивні форми
✅ Зручний для користувача – активація одним кліком для кращого UX
✅ Оптимізовано для мобільних пристроїв – зручні для сенсорного керування вбудовані засоби вибору часу
✅ Повністю інтегрований – безперебійно працює з усіма функціями форми
Поширені запитання
З: Яка різниця між 12-годинним та 24-годинним форматом?
12-годинний формат показує час з AM/PM, наприклад, 14:30. 24-годинний формат використовує час, наприклад, 2:30, і є поширеним у всьому світі.
З: Як працюють часові інтервали?
Інтервали встановлюють деталізацію вибору часу. Наприклад, 15-хвилинний інтервал показує 9:00, 9:15, 9:30 тощо.
З: Чи можу я обмежити час лише робочими годинами?
Так. Встановіть найперший та найпізніший час, наприклад, з 9:00 до 5:00, і користувачі зможуть вибирати лише в цьому діапазоні.
З: Що означає значення за замовчуванням «Поточний час»?
Якщо цю опцію ввімкнено, поле автоматично заповнюється поточним часом користувача під час завантаження форми.
З: Чи потрібне мені поле секунд?
Зазвичай ні. Увімкніть його лише тоді, коли вам потрібен точний час, наприклад, записи ГГ:ХХ:СС для подій або технічних даних.
З: Як працює вибір часу на мобільному пристрої?
Кожен пристрій використовує свій рідний інтерфейс користувача. iOS зазвичай використовує коліщатко вибору, тоді як Android використовує селектор у стилі годинника.
З: Чи можна використовувати умовну логіку з полями часу?
Так. Ви можете показувати або приховувати поля на основі вибраного часу, використовуючи такі умови, як «Дорівнює», «Більше ніж» або «Менше ніж».
З: Що станеться, якщо користувачі спробують вибрати недійсний час?
Час поза дозволеним діапазоном блокується перевіркою браузера та не може бути вибраний.
З: Чи можу я заздалегідь заповнити поле певним часом?
Так. Виберіть «Налаштування» для часу за замовчуванням і виберіть будь-яке значення, яке ви хочете попередньо завантажити.
З: Чи працює поле часу у всіх браузерах?
Усі сучасні браузери підтримують введення часу HTML5 із вбудованими засобами вибору. Старіші браузери повертаються до введення тексту з валідацією.
З: Чи можу я оформити поле часу відповідно до стилю мого сайту?
Так. Вибір використовує рідний інтерфейс користувача, але поле введення можна стилізувати за допомогою класів CSS.
З: У якому форматі використовується надісланий час?
Значення часу завжди надсилаються у 24-годинному форматі, що забезпечує узгодженість даних для обробки.
