Mostra un selettore del browser per la data, l'ora, il colore e i file

François Beaufort
François Beaufort
GitHub

Per molto tempo hai dovuto ricorrere a librerie di widget o hacker personalizzati per mostrare un selettore di date. La piattaforma web ora include il metodo HTMLInputElement showPicker(), un modo canonico per mostrare un selettore del browser non solo per le date, ma anche per l'ora, il colore e i file.

Sfondo

Una richiesta frequente dagli sviluppatori web è:

Come faccio a mostrare un selettore per controlli come la data
in modo programmatico?

Stack Overflow

Le risposte attuali non sono ottimali: si basano su librerie esterne, hack CSS o comportamenti specifici del browser come la simulazione di un'interazione dell'utente con click().

Sono felice di comunicarti che questi problemi non dureranno a lungo, perché la piattaforma web sta introducendo un modo canonico per mostrare un selettore del browser per gli elementi <input> con i seguenti tipi: "date", "month", "week", "time", "datetime-local", "color" e "file". Funziona anche per gli elementi <input> con suggerimenti basati su <datalist> o "autocomplete", che tratteremo anche in questo articolo.

Screenshot dei selettori del browser
Selettori della data del browser in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile e Firefox desktop (luglio 2021).

Come mostrare un selettore

La chiamata a showPicker() su un elemento <input> mostra all'utente un selettore del browser. Deve essere chiamato in risposta a un gesto dell'utente, ad esempio un gesto tocco o un clic del mouse. In caso contrario, non andrà a buon fine con un'eccezione NotAllowedError. Per motivi di sicurezza, verrà lanciata un'eccezione SecurityError quando viene chiamata in un iframe cross-origin.

Un selettore del browser viene mostrato quando l'elemento <input> è di uno di questi tipi: "date", "month", "week", "time", "datetime-local", "color" o "file".

L'esempio seguente mostra come aprire un selettore della data del browser.

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

È anche possibile precompilare un selettore del browser con gli elementi di <datalist> o "autocomplete".

L'esempio seguente mostra come aprire un selettore del browser 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>

Rilevamento di funzionalità

Per verificare se showPicker() è supportato, utilizza:

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

Demo

Puoi provare tutti i selettori supportati dal browser con una demo disponibile all'indirizzo https://show-picker.glitch.me/demo.html.

Supporto browser

showPicker() è disponibile in Chrome 99 o versioni successive.

Passaggi successivi

Al momento della stesura di questo documento, showPicker() non ha mai utilizzato la piattaforma web. La funzionalità potrebbe richiedere ulteriori interventi in futuro:

  • In futuro, potremmo aggiungere un elemento showPicker() simile all'elemento <select> se richiesto dagli sviluppatori web.
  • È possibile che closePicker() possa essere utile e potremmo prendere in considerazione la sua aggiunta se gli sviluppatori web lo chiederanno.
  • Potremmo aggiungere un criterio di autorizzazione che consenta agli iframe cross-origin di mostrare i selettori del browser quando la loro catena principale lo consente.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere la tua esperienza con showPicker().

Parlaci del design

C'è qualcosa in merito a showPicker() che non funziona come previsto? Oppure mancano metodi o proprietà per implementare la tua idea? Hai una domanda o un commento sul modello di sicurezza?

Problemi con l'implementazione?

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

  • Segnala un bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e istruzioni semplici per la riproduzione. Glitch è ideale per condividere riproduzioni rapide e semplici.

Mostra il tuo sostegno

Hai intenzione di utilizzare showPicker()? Il supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra agli altri fornitori di browser quanto sia fondamentale supportarle.

Invia un tweet all'account @ChromiumDev e facci sapere dove e come lo utilizzi.

Ringraziamenti

Grazie a Joe Medley per aver letto questo articolo. Immagine del calendario di Eric Rothermel su Unsplash.