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

François Beaufort

GitHub

Durante mucho tiempo, tuviste que recurrir a bibliotecas de widgets personalizados o hackeos 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 fechas, sino también para la hora, el color y los archivos.

Información general

Esta es una solicitud frecuente que recibimos de los desarrolladores web:

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

Stack Overflow

Las respuestas actuales no son buenas; dependen de bibliotecas externas, hackeos 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 presentará 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 los elementos <input> con sugerencias potenciadas por <datalist> o "autocomplete", que también se tratarán en este artículo.

Selectores de fecha para navegadores en las computadoras de escritorio de Chrome, Chrome para dispositivos móviles, Safari para computadoras de escritorio, Safari para dispositivos móviles y Firefox para computadoras de escritorio (julio de 2021).

Nota: A diferencia de un widget de selector de terceros, el selector de navegador resulta familiar, tiene una excelente compatibilidad específica para la plataforma y siempre se mantiene como parte del navegador.

Cómo mostrar un selector

Si llamas a showPicker() en un elemento <input>, se 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 lo llame en un iframe de origen cruzado.

Se muestra un selector de navegador cuando el elemento <input> es de 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 juegues con todos los selectores compatibles con el navegador.

Navegadores compatibles

showPicker() está disponible en Chrome 99 y versiones posteriores.

Próximos pasos

Al momento de la redacción, showPicker() es nuevo en la plataforma web. Es posible que la función requiera acciones adicionales en el futuro:

• Es posible que, en el futuro, agreguemos 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 piden.
• 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 de la Web quieren conocer tu experiencia 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?

• Presenta un problema de especificación en el repositorio de GitHub de WhatWG o agrega tu opinión a uno existente.

¿Tienes problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿La implementación es diferente de las especificaciones?

• Informa el error en https://new.crbug.com. Asegúrate de incluir tantos detalles como puedas, además de instrucciones simples para reproducirlos. Glitch funciona muy bien para compartir repros rápidos y fáciles.

Demuestra tu apoyo

¿Planeas usar showPicker()? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y les 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 estás usando.

Vínculos útiles

• Documentación de la MDN
• Explicación de WhatWG
• Especificación de WhatWG
• Opinión sobre la ETIQUETA
• Demostración | Fuente de la demostración
• Error de Chromium
• Entrada de ChromeStatus.com

Agradecimientos

Agradecemos a Joe Medley por revisar este artículo. Foto de imagen del calendario de Eric Rothermel en Unsplash.