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 incluye el método showPicker() de HTMLInputElement, una forma canónica de mostrar un selector de navegador no solo para las 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 buenas. Se basan en bibliotecas externas, hackeos de CSS o comportamientos específicos del navegador, como simular la interacción de un 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 la redacción, showPicker() es nuevo en la plataforma web. Es posible que esta función requiera 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 funcione 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?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir la mayor cantidad de detalles posible, así como instrucciones sencillas para la reproducción. Glitch es excelente para compartir reproducciones rápidas y fáciles.

Expresar apoyo

¿Piensas usar showPicker()? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y les muestra a otros proveedores de navegadores la importancia de admitirlas.

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

Agradecimientos

Gracias a Joe Medley por leer este artículo. Foto de la imagen del calendario de Eric Rothermel en Unsplash.