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

Francisco Beaufort
François Beaufort
GitHub

Por muito tempo, você precisou recorrer a dicas ou bibliotecas de widgets personalizados para mostrar um seletor de datas. A plataforma da Web agora vem com o método showPicker() 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 faço para mostrar
programaticamente um seletor para controles, como a data?

Stack Overflow

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

Fico feliz em compartilhar que esses dias acabarão assim que a plataforma da Web estiver apresentando 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". Isso também funciona para elementos <input> com sugestões com tecnologia <datalist> ou "autocomplete" que também vamos abordar neste artigo.

Capturas de tela de seletores do navegador
Seletores de data do navegador no Chrome para computador, Chrome para dispositivos móveis, Safari para computador, Safari e Firefox (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 um clique do mouse. Caso contrário, ele falha com uma exceção NotAllowedError. Por motivos de segurança, ele gera uma exceção SecurityError quando é chamado em um iframe de origem cruzada.

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 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 conferir se showPicker() é compatível, 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ê testar todos os seletores compatíveis com o navegador.

Suporte ao navegador

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

A seguir

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

  • No futuro, poderemos adicionar um showPicker() semelhante ao elemento <select>, se os desenvolvedores da Web solicitarem esse elemento.
  • É possível que 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 de origem cruzada mostrem seletores de navegador quando a cadeia mãe permitir isso.

Feedback

As equipes do Chrome e da comunidade de padrões da Web querem saber mais sobre suas experiências com o showPicker().

Fale sobre o design

Algo sobre showPicker() não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa 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 das especificações?

  • Informe um bug em https://new.crbug.com. Lembre-se de incluir o máximo de detalhes possível e instruções simples para a reprodução. O Glitch funciona muito bem para compartilhar repetições rápidas e fáceis.

Mostrar apoio

Você pretende usar o app showPicker()? O suporte público ajuda a equipe do Chrome a priorizar recursos e mostra a outros fornecedores de navegadores como é importante oferecer suporte a eles.

Envie um tweet para @ChromiumDev e informe onde e como você está usando a plataforma.

Agradecimentos

Agradecemos a Joe Medley por consultar este artigo. Foto da agenda de Eric Rothermel no Unsplash.