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
Stack Overflow
programaticamente um seletor para controles, como a data?
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.
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?
- Registre um problema de especificação no repositório do GitHub do WhatWG (em inglês) ou adicione suas ideias a um problema existente.
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.
Links úteis
- Documentação da MDN
- Explicação do WhatWG
- Especificação whatWG
- Revisão da TAG
- Demonstração | Origem da demonstração
- Bug do Chromium
- Entrada ChromeStatus.com
Agradecimentos
Agradecemos a Joe Medley por consultar este artigo. Foto da agenda de Eric Rothermel no Unsplash.