Mostrar un selector de navegador para la fecha, la hora, el color y los archivos

François Beaufort
François Beaufort
GitHub

Durante mucho tiempo, debías recurrir a bibliotecas de widgets personalizados o hacks para mostrar un selector de fecha. La plataforma web ahora se envía con el método showPicker() de HTMLInputElement, una forma canónica de mostrar un selector de navegador no solo para fechas, sino también para la hora, el color y los archivos.

Segundo plano

Una solicitud frecuente que recibimos de los desarrolladores web es la siguiente:

¿Cómo puedo mostrar de forma programática
un selector para controles como la fecha?

Stack Overflow

Las respuestas actuales no son muy buenas, ya que dependen de bibliotecas externas, hacks de CSS o comportamientos específicos del navegador, como simular una interacción del usuario con click().

Me complace informarte que esos días terminarán pronto, ya que la plataforma web está presentando una forma canónica de mostrar un selector de navegador para elementos <input> con estos tipos: "date", "month", "week", "time", "datetime-local", "color" y "file". También funcionará para elementos <input> con sugerencias potenciadas por <datalist> o "autocomplete", que también abordaremos en este artículo.

Capturas de pantalla de los selectores de navegadores
Selectores de fecha del navegador en Chrome para computadoras, Chrome para dispositivos móviles, Safari para computadoras, Safari para dispositivos móviles y Firefox para computadoras (julio de 2021).

Cómo mostrar un selector

Llamar a showPicker() en un elemento <input> le muestra al usuario un selector de navegador. 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 a un iframe de varios orígenes.

Se muestra un selector de navegador cuando el elemento <input> es uno de estos 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>

Un selector de navegador también se puede prepropagar 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 atributos

Para verificar si showPicker() es compatible, usa lo siguiente:

if ('showPicker' in HTMLInputElement.prototype) {
  // showPicker() is supported.
}

Demostración

Hay una demostración disponible en https://show-picker.glitch.me/demo.html para que puedas jugar con 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 necesite trabajo adicional en el futuro:

  • Es posible que deseemos agregar un showPicker() similar al elemento <select> en el futuro, 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 iframes de origen cruzado muestren selectores de navegador cuando su cadena superior les permita hacerlo.

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 en 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?

¿Tienes problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación?

  • Envía un informe de errores a https://new.crbug.com. Asegúrate de incluir tantos detalles como sea posible y de proporcionar instrucciones sencillas para reproducir el error. Glitch es excelente para compartir reproducciones rápidas y fáciles.

Expresar apoyo

¿Piensas usar showPicker()? Tu apoyo público ayuda al equipo de Chrome a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tuit a @ChromiumDev y cuéntanos dónde y cómo lo usas.

Agradecimientos

Gracias a Joe Medley por revisar este artículo. Imagen del calendario de Eric Rothermel en Unsplash.