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 de forma programática
para controles como data?

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 estes 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 para o 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 é mostrado quando o elemento <input> é 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 preenchido previamente 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 uma novidade na plataforma da Web. O recurso pode precisar de mais trabalho no futuro:

  • Talvez seja necessário adicionar um showPicker() semelhante ao elemento <select> no futuro, se os desenvolvedores da Web solicitarem.
  • Talvez closePicker() seja útil, e podemos considerar adicioná-lo se os desenvolvedores da Web pedirem.
  • Poderíamos 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 o showPicker().

Descreva o design

Há algo sobre showPicker() que não funciona como esperado? 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?

Problemas com a implementação?

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

  • Registre 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 da imagem do calendário de Eric Rothermel no Unsplash.