Mostrar um seletor de navegador de data, hora, cor e arquivos

François Beaufort
François Beaufort
GitHub

Por muito tempo, você precisava recorrer a bibliotecas de widgets personalizadas ou hacks para mostrar um seletor de datas. A plataforma da Web agora vem com o método showPicker() do HTMLInputElement, uma maneira canônica de mostrar um seletor de navegador não apenas para datas, mas também para hora, cor e arquivos.

Contexto

Uma solicitação frequente que recebemos de desenvolvedores da Web é:

Como posso mostrar um seletor para controles como data
de forma programática?

Stack Overflow

As respostas atuais não são ótimas. Elas dependem de bibliotecas externas, hacks de CSS ou comportamentos específicos do navegador, como simular uma interação do usuário com click().

Tenho o prazer de informar que isso vai mudar em breve, já que a plataforma da Web está introduzindo uma maneira canônica de mostrar um seletor de navegador para elementos <input> com esses tipos: "date", "month", "week", "time", "datetime-local", "color" e "file". Ele também vai funcionar para elementos <input> com sugestões geradas por <datalist> ou "autocomplete", que também serão abordados neste artigo.

Capturas de tela dos seletores de navegador
Seletores de data do navegador no Chrome para computador, Chrome para dispositivos móveis, Safari para computador, Safari para dispositivos móveis e Firefox para computador (julho de 2021).

Como mostrar um seletor

Chamar showPicker() em um elemento <input> mostra um seletor de navegador ao usuário. Ele precisa ser chamado em resposta a um gesto do usuário, como um gesto de toque ou clique do mouse. Caso contrário, ele vai falhar com uma exceção NotAllowedError. Por motivos de segurança, ele vai gerar uma exceção SecurityError quando for chamado em um iframe entre origens.

Um seletor de navegador é exibido quando o elemento <input> é de um destes tipos: "date", "month", "week", "time", "datetime-local", "color" ou "file".

O exemplo abaixo mostra como abrir um seletor de data do navegador.

<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>

Um seletor de navegador também pode ser pré-preenchido com itens de <datalist> ou "autocomplete".

O exemplo abaixo mostra como abrir um seletor de navegador com <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>

Detecção de recursos

Para verificar se o showPicker() tem suporte, use:

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

Demonstração

Uma demonstração está disponível em https://show-picker.glitch.me/demo.html para você brincar com todos os seletores aceitos pelo navegador.

Suporte ao navegador

showPicker() está disponível no Chrome 99 ou mais recente.

A seguir

No momento em que este artigo foi escrito, showPicker() era novo na plataforma da Web. O recurso pode precisar de mais trabalho no futuro:

  • Podemos adicionar um showPicker() semelhante ao elemento <select> no futuro, se os desenvolvedores Web pedirem.
  • É possível que closePicker() seja útil. Além disso, podemos considerar adicionar esse valor se os desenvolvedores Web pedirem.
  • Podemos adicionar uma política de permissões que permite que iframes entre origens mostrem seletores de navegador quando a cadeia pai permitir.

Feedback

A equipe do Chrome e a comunidade de padrões da Web querem saber sobre suas experiências com showPicker().

Conte-nos sobre o design

Há algo sobre showPicker() que não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa implementar para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança?

Tem problemas com a implementação?

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação?

  • Envie um bug em https://new.crbug.com. Inclua o máximo de detalhes possível e instruções simples para reproduzir o problema. O Glitch é ótimo para compartilhar reprosões rápidas e fáceis.

Mostrar apoio

Você planeja usar showPicker()? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores a importância de oferecer suporte a eles.

Envie um tweet para @ChromiumDev e diga onde e como você está usando.

Agradecimentos

Agradecemos a Joe Medley por revisar este artigo. Foto do Google Agenda por Eric Rothermel no Unsplash.