Por muito tempo, você precisou recorrer a bibliotecas de widgets personalizadas ou hacks para mostrar um
seletor de datas. Agora, a plataforma da Web vem com o método HTMLInputElement showPicker(), uma maneira canônica de mostrar um seletor de navegador não apenas para datas, mas também para hora, cor e arquivos.
Contexto
Um pedido frequente que recebemos de desenvolvedores da Web é:
Como mostrar um seletor para controles como data de forma programática
Stack Overflow
?
As respostas atuais não são boas. Elas dependem de bibliotecas externas, hacks de CSS ou
comportamentos específicos do navegador, como simular uma interação do usuário com click().
Esses dias vão acabar 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 funciona para elementos <input> com
sugestões geradas por <datalist> ou "autocomplete", que também serão abordadas
neste artigo.
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 toque ou
clique do mouse. Caso contrário, 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 showPicker() é compatível, use:
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
Demonstração
Uma demonstração está disponível em https://cdpn.io/web-dot-dev/fullpage/LEVKVdr 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 da redação deste artigo, showPicker() é uma novidade na plataforma da Web. O recurso pode precisar de mais trabalho no futuro:
- Talvez seja interessante adicionar um
showPicker()semelhante ao elemento<select>no futuro, se os desenvolvedores da Web pedirem. - É possível que
closePicker()seja útil, e podemos considerar adicionar isso se os desenvolvedores Web pedirem. - Podemos adicionar uma política de permissões que permite que iframes de origem cruzada mostrem seletores do navegador quando a cadeia principal permitir.
Feedback
A equipe do Chrome e a comunidade de padrões da Web querem saber sobre suas experiências com showPicker().
Fale 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 sua ideia?
Tem uma dúvida ou um comentário sobre o modelo de segurança?
- Registre um problema de especificação no repositório do WHATWG no GitHub ou adicione suas ideias a um problema atual.
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 reprodução.
Mostrar apoio
Você planeja usar o 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 informe onde e como você está usando.
Links úteis
- Documentação da MDN
- Explicação da WHATWG (em inglês)
- Especificação da WHATWG
- Revisão da TAG
- Demonstração | Fonte da demonstração
- Bug do Chromium
- Entrada do ChromeStatus.com
Agradecimentos
Agradecemos a Joe Medley por revisar este artigo. Foto da imagem da Agenda de Eric Rothermel no Unsplash.