Отключение нативного датапикера в Google Chrome: руководство

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

Если хотите отключить встроенный календарь Chrome для элемента input[type="date"], примените CSS-свойство -webkit-appearance со значением none:

input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
}

Таким образом, поле <input type="date"> будет освобождено от стандартного оформления и приготовлено к персонализированной стилизации или к использованию внешнего виджета календаря.

Пошаговая настройка полей ввода даты

Процесс изменения пользовательского интерфейса и замены встроенного календаря в Chrome для обеспечения единообразия в разных браузерах – это выполнимая задача. Ваше путешествие начинается здесь.

1. Скрытие визуальных индикаторов

Сначала вам нужно удалить иконку календаря и элементы управления прокруткой:

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    display: none;
}

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

2. Неявное удаление плейсхолдера

Скрытие плейсхолдера придаст изысканного вида вашей кастомизации. Вот как это сделать:

input[type="date"]::-webkit-input-placeholder {
    visibility: hidden !important;
}

3. Подготовка поля к замене

Теперь пришло время присоединить кроссбраузерный JavaScript-календарь, например jQuery UI. Используйте Modernizr для определения поддержки браузерами тега input[type="date"]:

if (!Modernizr.inputtypes.date) {
    $('input[type="date"]').datepicker();
}

Вы можете изменить тип поля с type=date на type=text, чтобы усилить совместимость:

$('input[type="date"]').attr('type', 'text').datepicker();

Сделайте стилизацию текстового поля таким образом, чтобы оно выглядело идентично полю ввода даты.

4. Стилизация нового пользовательского интерфейса

Не забудьте сформировать стиль для вашего кастомного календаря перед его интеграцией:

.custom-datepicker {
    /* Ваш стиль */
}

И используйте этот стилизованный календарь в разметке:

<input type="date" class="custom-datepicker">

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

Что же означает отключение встроенного календаря? Представим это так:

Стандартный календарь – это воздушный шар 🎈, привязанный к полю ввода.

Исходное состояние: 📅 (Поле) + 🎈 (Встроенный календарь)

Отключая его, мы, фактически, отпускаем шар, оставляя поле ввода на земле:

Измененное состояние: 📅 (Поле) – 🎈 (Отпущенный календарь)

Поле теперь доступно для ручного ввода или интеграции с пользовательским календарем.

Тонкая настройка вашего календаря

Внимание к деталям может помочь вашему продукту выделиться:

Приоритет мобильным устройствам:

Создание мобильно-ориентированного календаря существенно улучшит опыт интеракции.

Автозаполнение и доступность:

Поля ввода должны строго следовать принципам доступности с применением атрибутов autocomplete и aria-label:

<input type="date" autocomplete="bday" aria-label="Введите дату рождения">

Единый формат дат:

Уважение к культурным предпочтениям пользователей важно при определении формата отображения дат.

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

1. Обсуждение отключения встроенного календаря Chrome на Stack Overflow — опыт пользователей и решения.
2. <input type="date"> – HTML: HyperText Markup Language | MDN — подробное описание HTML элемента ввода даты от Mozilla.
3. Блог Chromium — обновления и советы от разработчиков Chrome.
4. Стилизация кроссбраузерных элементов управления диапазоном в CSS | CSS-Tricks — рекомендации по стилизации форм.
5. Типы ввода даты и времени | Can I use... — проверка поддержки HTML5 элементов ввода в различных браузерах.
6. Изучение форм | web.dev — ресурс по созданию форм в современной веб-разработке.
7. Типы ввода в HTML — обзор различных типов полей ввода в HTML.