Показывать средство выбора в браузере даты, времени, цвета и файлов.

Франсуа Бофор
François Beaufort
GitHub

Долгое время для отображения панели выбора даты приходилось прибегать к использованию пользовательских виджет-библиотек или хаков. Теперь веб-платформа поддерживает метод HTMLInputElement showPicker() — канонический способ отображения панели выбора даты в браузере не только для дат, но и для времени, цвета и файлов.

Фон

Часто встречающийся запрос от веб-разработчиков:

Как мне программно
показать средство выбора для элементов управления, таких как дата?

Переполнение стека

Текущие ответы не очень хороши; они полагаются на внешние библиотеки, CSS-хаки или специфическое поведение браузера, например, имитацию взаимодействия пользователя с помощью click() .

Рад сообщить, что эти времена скоро канут в Лету, поскольку веб-платформа представляет канонический способ отображения окна выбора браузера для элементов <input> со следующими типами: "date" , "month" , "week" , "time" , "datetime-local" , "color" и "file" . Это также будет работать для элементов <input> с подсказками, основанными на <datalist> или "autocomplete" , о которых мы также поговорим в этой статье.

Скриншоты выбора браузера
Выбор даты в браузере Chrome для ПК, Chrome для мобильных устройств, Safari для ПК, Safari для мобильных устройств и Firefox для ПК (июль 2021 г.).

Как показать сборщик

Вызов showPicker() для элемента <input> отображает пользователю окно выбора браузера. Вызов должен быть вызван в ответ на действие пользователя, например, касание экрана или щелчок мыши; в противном случае возникнет ошибка с исключением NotAllowedError . Из соображений безопасности при вызове в кросс-доменном iframe будет сгенерировано исключение SecurityError .

Выбор браузера отображается, когда элемент <input> имеет один из следующих типов: "date" , "month" , "week" , "time" , "datetime-local" , "color" или "file" .

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

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

Выбор браузера также может быть предварительно заполнен элементами из <datalist> или "autocomplete" .

В примере ниже показано, как открыть окно выбора браузера с помощью <datalist> .

<datalist id="ice-cream-flavors">
  <option value="Chocolate"> </option>
  <option value="Coconut"> </option>
  <option value="Mint"> </option>
  <option value="Strawberry"> </option>
  <option value="Vanilla"> </option>
</datalist>
<input type="text" list="ice-cream-flavors">
<button>Show the suggestions</button>

<script>
  const button = document.querySelector("button");
  const iceCreamFlavorsInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      iceCreamFlavorsInput.showPicker();
      // A picker containing some ice cream flavors is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

Обнаружение особенностей

Чтобы проверить, поддерживается ли showPicker() , используйте:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Демо

Демо-версия доступна по адресу https://cdpn.io/web-dot-dev/fullpage/LEVKVdr , где вы можете поиграть со всеми подборщиками, поддерживаемыми браузером.

Поддержка браузеров

showPicker() доступен в Chrome 99 и более поздних версиях.

Что дальше?

На момент написания статьи функция showPicker() была новой для веб-платформы. В будущем, возможно, потребуется доработка этой функции:

  • В будущем мы, возможно, захотим добавить аналогичный showPicker() к элементу <select> , если веб-разработчики попросят об этом.
  • Возможно, closePicker() может оказаться полезным, и мы могли бы рассмотреть возможность его добавления, если веб-разработчики попросят об этом.
  • Мы могли бы добавить политику разрешений , которая позволяет кросс-источниковым iframes показывать средства выбора браузера, если их родительская цепочка позволяет им это делать.

Обратная связь

Команда Chrome и сообщество веб-стандартов хотят узнать о вашем опыте работы с showPicker() .

Расскажите нам о дизайне

Есть ли что-то в showPicker() , что работает не так, как вы ожидали? Или отсутствуют методы или свойства, необходимые для реализации вашей идеи? Есть вопросы или комментарии по модели безопасности?

  • Отправьте сообщение о проблеме со спецификацией в репозиторий WHATWG GitHub или добавьте свои мысли к существующей проблеме.

Проблема с реализацией?

Вы обнаружили ошибку в реализации Chrome? Или реализация отличается от спецификации?

  • Сообщите об ошибке по адресу https://new.crbug.com . Опишите её как можно подробнее и предоставьте простые инструкции по её воспроизведению.

Показать поддержку

Планируете ли вы использовать showPicker() ? Ваша публичная поддержка помогает команде Chrome расставлять приоритеты в отношении функций и показывает другим разработчикам браузеров, насколько важна их поддержка.

Отправьте твит @ChromiumDev и расскажите, где и как вы его используете.

Благодарности

Благодарим Джо Медли за рецензирование этой статьи. Изображение для календаря предоставлено Эриком Ротермелем на Unsplash .