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

Франсуа Бофор
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 . По соображениям безопасности он выдает исключение SecurityError при вызове в iframe с разными источниками.

Средство выбора браузера отображается, когда элемент <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://show-picker.glitch.me/demo.html , где вы можете поиграть со всеми средствами выбора, поддерживаемыми браузером.

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

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

Что дальше

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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