Отключение времени в Bootstrap DateTime Picker: решение

Быстрый ответ

Если нужно, чтобы Bootstrap позволял ввести в селекторе только дату — используйте свойство format со значением 'YYYY-MM-DD' при инициализации селектора:

$('.datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD' // Применяется указанный формат, и время исключается
});

Таким образом, пользователь сможет выбрать только дату, без указания времени.

В глубину вопроса: настройка отображения только даты

Отключение выбора времени реализуется через установку определённого формата. Когда мы указываем значение 'YYYY-MM-DD', селектор даты и времени превращается просто в выбор даты.

Если вам важно учесть разные локализации, стоит применить библиотеку Moment.js и формат 'L', который учитывает региональные настройки форматов дат:

$('.datetimepicker').datetimepicker({
    format: 'L' // Эта настройка устраняет возможную путаницу между форматами дат
});

Подход должен быть адаптирован под версию Bootstrap

Метод отключения времени зависит от версии Bootstrap:

• В версии 3 для этого применяется параметр pickTime: false:

$('#datetimepicker4').datetimepicker({
    pickTime: false // Время отключено
});

• В версии 4 достаточно просто не упоминать время в формате, и возможность его выбора исчезнет.

Подробнее об этом расскажет наш спикер на видео

Используйте Moment.js для локализации

Благодаря использованию библиотеки Moment.js, имеющей поддержку разных региональных форматов даты и времени, ваш селектор будет удобен для пользователей по всему миру. Дополнительная информация доступна в документации Moment.js.

Визуализация

Исключение выбора времени из селектора даты и времени в Bootstrap можно представить как отключение будильника на цифровых часах:

Bootstrap datetime picker (📅🕒): [Дата + Время]
Желаемое состояние: [Только дата 📅]

И так получается, что отключается функция выбора времени 🛠️:

Было: [📅+⏰]
Стало: [📅]
📅🚫⏰: Ваше свидание будет без сюрпризов — ведь вы точно знаете дату!

Гармонизируйте дизайн с темой вашего сайта

Для лучшей интеграции в общий дизайн сайта используйте классы Bootstrap .container и .row при оформлении селектора даты и времени.

Обеспечьте единообразный пользовательский интерфейс

Внесите соответствующие изменения в макет интерфейса:

• Удалите иконку glyphicon-time, это будет намеком на отсутствие выбора времени.
• Убедитесь, что макет селектора соответствует классу 'form-control', чтобы сохранить общий стиль оформления.

Проверка и тестирование

Тщательно протестируйте модифицированный компонент, чтобы убедиться в его корректности:

$('#datetimepicker4').on("dp.change", function(e) {
    console.log(e.date);
    // Можно увидеть дату выбранного события
});

Это позволит удостовериться, что селектор функционирует в соответствии с ожиданиями.

Полезные материалы

1. Tempus Dominus – Bootstrap 4 — официальная документация для селектора даты и времени Bootstrap.
2. GitHub – Eonasdan/tempus-dominus: Мощный виджет выбора даты/времени. — GitHub-репозиторий компонента Bootstrap от Eonasdan.
3. Moment.js | Docs — подробная документация по работе с датами и временем в библиотеке Moment.js.
4. HTML: HyperText Markup Language (MDN) — подробное руководство Mozilla по встроенным элементам выбора даты и времени HTML5.
5. Стилизация кроссбраузерных элементов ввода с помощью CSS — полезные рекомендации CSS-Tricks по стилизации элементов форм для разных браузеров.
6. Все о формах HTML5 и типах ввода — подробная информация по формам HTML5 и типам ввода.