Поле дати
Збирайте дати з точністю та контролем. Від бронювання зустрічей до дат народження з гнучким форматуванням, обмеженнями діапазону дат та інтелектуальною перевіркою – поле «Дата» надає вбудованим засобам вибору календаря потужні елементи керування для минулих дат, майбутніх дат, вихідних та користувацьких діапазонів.
Професійний збір даних з інтелектуальною перевіркою
Ідеально підходить для:
Потужні функції для будь-якого випадку використання
📅 Чотири формати дати
Виберіть регіональні налаштування:
Перший рік: 31.12.2023 (ISO 8601)
Міжнародний стандартний формат. Найкраще підходить для баз даних, сортування та технічних застосувань.
Перший місяць: 31.12.2023 (за американським стилем)
Американський формат. Найбільш знайомий користувачам зі США з порядком у форматі «місяць-день-рік».
День перший: 31/12/2023 (за британським стилем)
Британський/європейський формат з порядком день-місяць-рік. Поширений на міжнародному рівні.
День перший з тире: 31-12-2023
Альтернативний європейський формат з використанням тире замість склесів.
Чому формат має значення:
Відповідає очікуванням користувачів за регіонами
Запобігає плутанині та помилкам
Забезпечує стабільне зберігання даних
Покращує показники заповнення форм
Налаштування дисплея:
Формат впливає на те, як дати відображаються користувачам, зберігаючи при цьому стандартний формат внутрішнього зберігання.
📏 Обмеження діапазону дат
Контрольні дати, що вибираються:
Перша дозволена дата (мінімальна):
Встановіть найпершу дату, яку можуть вибрати користувачі. Дати до цієї дати вимкнено у виборі календаря.
Приклади:
- Реєстрація на подію: Мінімальна дата = дата оголошення події
- Призначення: Мінімальна дата = сьогодні (без попередніх бронювань)
- Історичні дані: Мінімальна дата = дата заснування компанії
- Терміни проекту: Мінімальна дата = дата початку проекту
Остання дозволена дата (максимальна):
Встановіть останню дату, яку користувачі можуть вибрати. Дати після цієї дати вимкнено у виборі календаря.
Приклади:
- Реєстрація за ранньою ціною: Максимальна дата = кінцевий термін
- Обмежена доступність: Максимальна дата = остання доступна дата
- Історичні записи: Максимальна дата = сьогодні
- Конкретні часові рамки: Максимальна дата = кінець акції
Кнопки швидкого налаштування:
Встановіть мінімальну/максимальну дату на сьогодні одним клацанням миші або миттєво зніміть обмеження.
⏮️ Блокувати минулі дати
Запобігти вибору попередніх дат:
Увімкніть опцію «Блокувати минулі дати», щоб вимкнути всі дати до сьогоднішньої. Користувачі можуть вибирати лише сьогоднішню або майбутню дату.
Ідеально підходить для:
- Запис на прийом (без попередніх записів)
- Реєстрація на подію (лише на майбутні події)
- Вибір дати доставки (майбутні поставки)
- Системи бронювання (попереднє бронювання)
- Терміни (мають бути в майбутньому)
Розумна поведінка:
Автоматично оновлюється щодня – сьогоднішня дата завжди дійсна, вчорашня стає неактивною. Ручне керування датою не потрібне.
Поєднується з іншими обмеженнями:
Використовуйте з максимальною датою для створення майбутніх вікон (наприклад, бронювання від сьогодні до 30 днів наперед).
⏭️ Блокувати майбутні дати
Запобігти вибору майбутніх дат:
Увімкніть опцію «Блокувати майбутні дати», щоб вимкнути всі дати після сьогоднішньої. Користувачі можуть вибирати лише сьогоднішню або минулу дату.
Ідеально підходить для:
- Збір дати народження (не може бути в майбутньому)
- Дати історичних подій (лише минулі)
- Дати початку досвіду (коли ви почали?)
- Дати завершення (вже відбулося)
- Річниці (минулі події)
Використання в реальному світі:
Забезпечує логічне введення дат – дати народження, дати прийняття на роботу, дати випуску повинні бути в минулому.
Вбудована перевірка:
Браузер автоматично запобігає недійсному вибору. Не потрібно заплутувати повідомленнями про помилки.
📆 Вимкнути вихідні
Вибір блоку субота та неділя:
Увімкніть опцію «Без вибору вихідних», щоб вимкнути суботи та неділі у виборі календаря. Можна вибрати лише дні тижня (понеділок-п’ятниця).
Ідеально підходить для:
- Бронювання ділових зустрічей
- Планування доставки в офіс
- Вибір дати консультації
- Запис на обслуговування (лише з понеділка по п'ятницю)
- Планування B2B-зустрічей
Розумні взаємодії:
Якщо користувач якимось чином вибере вихідні (за допомогою клавіатури), система автоматично виправить це на наступний понеділок. Безперебійний захист.
Поєднується з іншими опціями:
Працює з обмеженнями минулого/майбутнього – можна вибрати лише дні тижня в межах дозволеного діапазону.
🎯 Параметри дати за замовчуванням
Попередній вибір дат початку:
Попередньо не вибрана дата (порожнє поле):
Поле починається порожнім. Користувачі повинні активно вибрати дату. Найкраще підходить для дат, які сильно відрізняються.
Сьогоднішня дата:
Автоматично попередньо заповнює поточну дату під час завантаження форми. Оновлюється динамічно щодня.
Використовуйте випадки:
- Поля «Дата запиту»
- Форми позначок часу
- Документація на поточну дату
- Вибір розкладу на сьогодні
Завтрашня дата:
Автоматично попередньо заповнюється завтрашньою датою. Ідеально підходить для бронювання на наступний день.
Використовуйте випадки:
- Вибір доставки наступного дня
- Запис на завтрашній прийом
- Майбутні події за замовчуванням
- Доступність наступного дня
Спеціальна дата:
Виберіть будь-яку фіксовану дату для попереднього вибору. Чудово підходить для запропонованих дат або форм, пов’язаних із певною подією.
Використовуйте випадки:
- Рекомендована дата зустрічі
- Дата події за замовчуванням
- Пропозиції щодо термінів
- Дати попередньо заповнених заявок
📱 Вибір рідного календаря
Вибір дати, оптимізований для браузера:
Використовує вбудовані поля для введення дати HTML5 із вбудованим у браузері засобом вибору календаря. Забезпечує звичний інтерфейс, адаптований до платформи.
Зовнішній вигляд, що залежить від платформи:
- iOS: Гарний селектор коліщатка
- Android: Календар у матеріальному дизайні
- Настільний Chrome: Випадаючий календар
- Safari для робочого столу: компактний вибір
- Усі оптимізовані для їхньої платформи
Переваги:
- Бібліотека JavaScript не потрібна
- Миттєве завантаження
- Доступний за замовчуванням
- Навігація за допомогою клавіатури
- Оптимізовано для сенсорного керування
- Мінімальний розмір файлу
Натисніть будь-де:
Для відкриття календаря можна клікнути по всьому полю. Велика область взаємодії підвищує зручність використання.
✅ Розумна перевірка дати
Вбудовані шари перевірки:
Перевірка формату:
Браузер автоматично забезпечує правильний формат дати. Користувачі не можуть вводити недійсні дати, наприклад, «2023-13-45».
Перевірка діапазону:
Мінімальні/максимальні дати застосовуються на рівні засобу вибору. Недійсні дати вимкнено – їх не можна вибрати.
Логічна перевірка:
Обмеження на минуле/майбутнє/вихідні застосовуються автоматично. Система запобігає недійсному вибору.
Очистити повідомлення про помилки:
Якщо користувачі якимось чином обходять обмеження, з’являються чіткі повідомлення з поясненнями: «Дата має бути після 01.01.2024» або «Дата має бути до 31.12.2024».
🔀 Умовна логіка
Видимість динамічного поля дати:
Показувати або приховувати поля дати на основі значень інших форм. Відображати відповідні поля дати лише за потреби.
Правила розширеної логіки:
- Логіка «І» – усі умови мають бути виконані
- Логіка АБО – будь-яка умова може викликати дію
- 8 операторів – Дорівнює, Не дорівнює, Більше ніж, Менше ніж, Містить, Пусто та інші
Використовуйте випадки:
- Показувати «Бажану дату» лише тоді, коли тип бронювання дорівнює «Зустріч»
- Відображати «Дату події», якщо тип події не порожній
- Показати «Дату доставки», якщо спосіб доставки дорівнює «Заплановано»
- Приховати «Дату повернення», якщо тип квитка дорівнює «В один кінець»
🎯 Покращений користувацький досвід
Вбудовані інтелектуальні функції:
- Візуальне відображення дати – вибрана дата відображається у зручному для читання форматі
- Піктограма календаря – візуальний індикатор вибору дати
- Навігація клавіатурою – клавіші зі стрілками переміщуються по календарю
- Доступність вкладок – повна підтримка клавіатури
- Оптимізовано для сенсорного керування – великі сенсорні цілі на мобільних пристроях
- Автоматичне виправлення – недійсні дати автоматично налаштовуються на найближчу дійсну дату
- Виділення сьогодні – поточна дата виділена у засобі вибору
- Швидкий вибір – клацніть дату, вибірник автоматично закриється
- Підтримка тексту довідки – додавання підказок або інструкцій щодо формату дати
- Обов’язкова перевірка – зробити вибір дати обов’язковим
- Користувацькі CSS-класи – Застосування власного стилю
- Підтримка доступності – мітки ARIA, сумісність із програмою зчитування з екрана
Просте налаштування за 3 кроки
Підготуйте поле дати за лічені хвилини
Додати поле дати
Перетягніть поле «Дата» з розділу «Основні поля» у форму.
Виберіть формат і діапазон
Виберіть формат дати (США, Велика Британія, ISO), за потреби встановіть мінімальні/максимальні межі дати та за потреби ввімкніть блокування минулого/майбутнього/вихідних днів.
Встановити дату за замовчуванням
Виберіть, чи поле починається з порожнього, чи попередньо заповнюється сьогоднішньою, завтрашньою чи вказаною вами власною датою.
???? От і все! Ваше поле дати готове з розумною перевіркою та вбудованими засобами вибору.
Програми реального світу
Призначення бронювання
* Дати медичних зустрічей
* Розклад консультацій
* Вибір призначення послуги
* Узгодження дати зустрічі
Реєстрація події
* Дати відвідування заходу
* Вибір дати семінару
* Реєстрація на конференцію
* Дати реєстрації на заняття
Доставка і доставка
* Бажані дати доставки
* Вибір дати доставки
* Планування дати самовивозу
* Планування дати відправлення
Бізнес-додатки
* Кінцеві терміни виконання проекту
* Терміни виконання завдань
* Дати набрання чинності договору
* Дати початку/закінчення угоди
Персональна інформація
* Збір дати народження
* Річниці
* Дата початку роботи
* Дати завершення навчання
Бронювання
* Дати заселення в готель
* Дати початку оренди
* Дати підтвердження бронювання
* Вибір періоду бронювання
Заповніть параметри поля
Основна конфігурація
- Мітка поля – заголовок, що відображається над полем дати
- Опис/Довідковий текст – Додаткові інструкції для користувачів
- Обов’язкове поле – Зробіть вибір дати обов’язковим
- Заповнювач – не застосовується для нативних засобів вибору дати
Формат дати
- Як відображати дати:
- Перший рік: 31.12.2023 (ISO 8601)
- Перший місяць: 31.12.2023 (за американським стилем)
- День перший: 31/12/2023 (за британським стилем)
- День перший з тире: 31-12-2023
Обмеження діапазону дат
- Перша дозволена дата – найраніша дата, яку можуть вибрати користувачі (залиште поле порожнім, якщо немає обмежень)
- Остання дозволена дата – остання дата, яку можуть вибрати користувачі (залиште поле порожнім, якщо немає обмежень)
Параметри блокування дат
- Блокувати минулі дати – Запобігає вибору будь-яких дат до сьогоднішньої
- Блокувати майбутні дати – Запобігає вибору будь-яких дат після сьогоднішньої
- Немає вибору вихідних – запобігає вибору суботи та неділі
Вибір дати початку:
- Без попередньо вибраної дати (порожнє) – Поле починається порожнім
- Сьогоднішня дата – Поточна дата попередньо заповнена
- Завтрашня дата – Наступний день попередньо заповнено
- Конкретна дата (ви обираєте) – попередньо заповнена власна дата
Спеціальна дата за замовчуванням – виберіть дату початку (відображається, якщо вибрано опцію «Конкретна дата»)
Умовна логіка
- Увімкнути умовну логіку – показувати/приховувати на основі умов
- Логічний тип
- Усі умови мають бути виконані (ТА)
- Будь-яка умова може бути виконана (АБО)
- Правила умов
- Показати/Приховати – Дія, яку потрібно виконати
- Поле – яке поле перевіряти
- Оператор – Дорівнює, Не дорівнює, Містить, Більше ніж, Менше ніж, Пусто, Не пусто
- Значення – значення порівняння
- Кілька умов – додавання необмеженої кількості правил
Додаткові параметри
- Приховане поле – Зробити поле невидимим, але включити дату у подання
- Користувацькі CSS-класи – Застосування власного стилю
- Атрибути доступності – мітки ARIA для програм зчитування з екрана
Чому варто обрати саме наше поле для дат?
✅ Різні формати – американський, британський, ISO та тиреподібний формати
✅ Контроль діапазону дат – Точно встановіть мінімальні/максимальні межі
✅ Блокувати минулі дати – дозволити вибір лише майбутніх дат
✅ Блокувати майбутні дати – Дозволити вибір лише минулих дат
✅ Вимкнути вихідні – вибір лише у будні дні для бізнесу
✅ Розумні налаштування за замовчуванням – попередньо заповніть сьогоднішню, завтрашню або власну дату
✅ Native Pickers – календарі, оптимізовані для браузера, для кожної платформи
✅ Автоматична перевірка – не можна вибрати недійсні дати
✅ Повністю інтегрований – безперебійно працює з усіма функціями форми
Поширені запитання
З: Які формати дати підтримуються?
Чотири формати: ISO (2023-12-31), US (12/31/2023), UK (31/12/2023) та Dashed (31-12-2023). Виберіть формат, який найкраще відповідає вашій аудиторії.
З: Як заборонити користувачам вибирати минулі дати?
Увімкніть опцію «Блокувати минулі дати». Будь-яка дата до сьогоднішньої стане недоступною для вибору дати.
З: Чи можу я обмежити дати певним діапазоном?
Так. Встановіть «Першу дозволену дату» та «Останню дозволену дату», щоб обмежити вибір визначеним вікном.
З: Що робить функція «Вимкнути вихідні»?
Це виключає можливість вибору суботи та неділі. Доступними залишаються лише дні з понеділка по п'ятницю.
З: Як працюють дати за замовчуванням?
Виберіть, чи поле починається з порожнього місця, чи відображається сьогоднішня дата, завтрашня дата чи власна дата. Сьогодні та завтра налаштовуються автоматично.
З: Чи виглядає вибір дати однаково на всіх пристроях?
Ні. Він використовує рідний інтерфейс кожного пристрою — коліщатка вибору iOS, календарі Android, селектори робочого столу тощо.
З: Чи можна заблокувати майбутні дати для полів дати народження?
Так. Увімкніть опцію «Блокувати майбутні дати», щоб користувачі могли вибирати лише дати до сьогоднішньої включно.
З: Як працюють мінімальні/максимальні дати разом із блокуванням минулого/майбутнього?
Вони складаються. Наприклад, блокування минулих дат плюс максимальна дата на 30 днів вперед призводить до діапазону від сьогоднішнього дня до наступних 30 днів.
З: Чи можуть користувачі вводити дати замість використання засобу вибору?
Деякі браузери дозволяють введення тексту з перевіркою. Інші примусово використовують вибір дати. Усі вони забезпечують правильне форматування.
З: Що станеться, якщо користувач вибере вихідні, коли вихідні вимкнено?
Система автоматично налаштовується на найближчий дійсний день тижня, зазвичай наступний понеділок.
З: Чи можна використовувати умовну логіку з полями дати?
Так. Використовуйте порівняння на кшталт «Дорівнює», «Пусто», «Не порожньо», «Більше ніж» або «Менше ніж», щоб контролювати видимість інших полів.
З: Як мені встановити кінцевий термін?
Введіть термін дії в поле «Остання дозволена дата». Користувачі не можуть вибирати дати після цієї дати. Поєднайте це з опцією «Блокувати минулі дати», якщо вам потрібна доступність лише в майбутньому.
