Durante mucho tiempo, debiste recurrir a bibliotecas de widgets personalizadas o soluciones alternativas para mostrar un selector de fecha. La plataforma web ahora se distribuye con el método showPicker() de HTMLInputElement, una forma canónica de mostrar un selector del navegador no solo para fechas, sino también para horas, colores y archivos.
Fondo
Una solicitud frecuente que recibimos de los desarrolladores web es la siguiente:
¿Cómo puedo mostrar de forma programática
Stack Overflow
un selector para controles como la fecha?
Las respuestas actuales no son buenas, ya que dependen de bibliotecas externas, soluciones alternativas de CSS o comportamientos específicos del navegador, como simular una interacción del usuario con click().
Me complace informarles que esos días terminarán pronto, ya que la plataforma web presentará una forma canónica de mostrar un selector de navegador para los elementos <input> con estos tipos: "date", "month", "week", "time", "datetime-local", "color" y "file". También funcionará para los elementos <input> con sugerencias potenciadas por <datalist> o "autocomplete", que también abordaremos en este artículo.
Cómo mostrar un selector
Llamar a showPicker() en un elemento <input> muestra un selector de navegador al usuario. Se debe llamar en respuesta a un gesto del usuario, como un gesto táctil o un clic del mouse. De lo contrario, fallará con una excepción NotAllowedError.
Por motivos de seguridad, arrojará una excepción SecurityError cuando se llame en un iframe de varios orígenes.
Se muestra un selector de navegador cuando el elemento <input> es uno de los siguientes tipos: "date", "month", "week", "time", "datetime-local", "color" o "file".
En el siguiente ejemplo, se muestra cómo abrir un selector de fecha del 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>
El selector de navegador también se puede completar previamente con elementos de <datalist> o "autocomplete".
En el siguiente ejemplo, se muestra cómo abrir un selector de navegador con <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>
Detección de características
Para verificar si se admite showPicker(), usa lo siguiente:
if ('showPicker' in HTMLInputElement.prototype) {
// showPicker() is supported.
}
Demostración
En https://cdpn.io/web-dot-dev/fullpage/LEVKVdr, tienes disponible una demostración para que pruebes todos los selectores compatibles con el navegador.
Navegadores compatibles
showPicker() está disponible en Chrome 99 o versiones posteriores.
¿Qué sigue?
Al momento de escribir este artículo, showPicker() es una novedad en la plataforma web. Es posible que la función requiera trabajo adicional en el futuro:
- Es posible que, en el futuro, queramos agregar un
showPicker()similar al elemento<select>si los desarrolladores web lo solicitan. - Es posible que
closePicker()sea útil, y podríamos considerar agregarlo si los desarrolladores web lo solicitan. - Podríamos agregar una política de permisos que permita que los elementos iframe de origen cruzado muestren selectores del navegador cuando su cadena principal lo permita.
Comentarios
El equipo de Chrome y la comunidad de estándares web quieren conocer tus experiencias con showPicker().
Cuéntanos sobre el diseño
¿Hay algo sobre showPicker() que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea?
¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?
- Informa un problema de especificación en el repositorio de GitHub de WHATWG o agrega tus ideas a un problema existente.
¿Tienes problemas con la implementación?
¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de las especificaciones?
- Informa un error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas y sencillas instrucciones para reproducir el problema.
Mostrar apoyo
¿Planeas usar showPicker()? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.
Envía un tweet a @ChromiumDev y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Documentación de MDN
- Explicación de WHATWG
- Especificación de WHATWG
- Revisión del TAG
- Demostración | Fuente de la demostración
- Error de Chromium
- Entrada de ChromeStatus.com
Agradecimientos
Gracias a Joe Medley por revisar este artículo. Foto de la imagen del calendario de Eric Rothermel en Unsplash.