Не отображается placeholder в input type date: решение

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

Создайте впечатление наличия плейсхолдера для input типа date, применяя CSS к псевдоэлементу label:

<label for="date" class="date-label">Дата<input type="date" id="date" class="date-input"></label>

.date-label {
  position: relative;
  display: inline-block;
}
.date-input:invalid + .date-label::before {
  content: 'ДД/ММ/ГГГГ';
  color: grey;
  margin-left: 10px;
}
.date-input:focus + .date-label::before {
  content: none;
}

Применяйте стили непосредственно к label, управляя отображением плейсхолдера с использованием псевдоклассов :invalid и :focus.

Динамические стратегии для элемента ввода даты

Оптимизируйте взаимодействие с элементом input типа date, используя следующие подходы.

Умное переключение: из "text" в "date"

Начните с текстового поля и переключите его на поле даты при получении фокуса:

const input = document.querySelector('.date-input'); 

input.addEventListener('focus', function(){
  this.type = 'date';
});
input.addEventListener('blur', function(){
  if(this.value === '') {
    this.type = 'text'; 
  }
});

Это особенно полезно для приложений PhoneGap, где встроенный выбор даты может значительно улучшить UX.

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

Изысканный CSS: Псевдо-плейсхолдер

Используйте псевдоэлемент CSS ::before для стилизации плейсхолдера:

input[type="date"] {
  /* Ваши стили */
}
input[type="date"]:before {
  content: attr(placeholder);
  color: grey;
  text-align: left;
  margin-right: 10px;
  /* Дополнительные стили */
}
input[type="date"]:focus:before {
  content: none;
}

Совмещение изменения типа поля с CSS плейсхолдером обеспечивает плавное взаимодействие на разных платформах.

Камуфлирующие маски и взаимоотношения классов

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

$('.date-input').mask('00/00/0000');

Используйте событие change, чтобы добавлять или удалять классы, в зависимости от того, была ли введена дата:

input.addEventListener('change', function(){
  if(this.value) {
    this.classList.add('has-value'); 
  } else {
    this.classList.remove('has-value'); 
  }
});

Такой подход позволяет динамически делать видимым плейсхолдер, упрощая взаимодействие с пользователем.

Сложности и решения при разработке

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

Сделайте упор на доступность веба

Убедитесь, что ваши поля ввода доступны для экранных читалок и соответствуют стандартам веб-доступности.

Узнайте международные особенности

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

Учтите особенности браузеров

Проводите тестирование вашего интерфейса в различных браузерах, учитывая их особенности, особенно в Internet Explorer.

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

Представьте себе ситуацию: вы в кинотеатре, но экран отсутствует. Таким же образом выглядит элемент ввода без плейсхолдера:

Ожидаем: 🎭 + 📺 + 🍿 = Захватывающий сеанс
Реальность:  🎭 + ❓ + 🍿 = Замешательство

Плейсхолдер — это руководство для пользователя:

<input type="text" placeholder="Введите ваше имя">

Тип date самодостаточен и не требует руководства, так как интерфейс пользователя напрямую взаимодействует с ним:

`type="text"`: 🎭 + 📄 + 🍿 = Знакомая обстановка
`type="date"`: 🎭 + 🗓️ + 🍿 = Прямой контакт

Доведение до совершенства: продвинутые реализации

Улучшение элемента ввода даты включает в себя учет технологических ограничений и предпочтений пользователей.

Постепенное улучшение пользовательского опыта

Внедряйте сложные функциональности по мере их поддержки браузерами.

Отзывчивость и согласованность

Элемент ввода должен легко адаптироваться к размерам экрана с применением медиазапросов и гибких метрик.

Настройка производительности

Оптимизируйте использование JavaScript и CSS для обеспечения лучшей производительности на мобильных устройствах.

Священный Грааль тестирования

Проводите тестирование функциональности на различных устройствах для обеспечения стабильности работы.

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

1. <input>: Элемент ввода – HTML: HyperText Markup Language | MDN — документация MDN по элементу <input>.
2. HTML input placeholder Attribute — руководство по атрибуту placeholder.
3. ::placeholder | CSS-Tricks — советы по стилизации плейсхолдеров.
4. HTML5 forms input types | HTML5 Doctor — руководство по новым типам ввода в HTML5.
5. HTML5 Forms: Input Types (Part 1) – SitePoint — обзор типов ввода в HTML5 и их поддержка.
6. An Extensive Guide To Web Form Usability — Smashing Magazine — полное руководство по дизайну веб-форм.
7. Can I use... Support tables for HTML5, CSS3, etc — таблицы поддержки атрибута placeholder.