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, per mostrare un selettore della data, era necessario ricorrere a librerie di widget personalizzate o ad hack. 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 che riceviamo 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.

Viene visualizzato un selettore del browser quando l'elemento <input> è uno dei seguenti 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>

Un selettore del browser può anche essere precompilato 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 nella 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 articolo, showPicker() è una novità della piattaforma web. La funzionalità potrebbe richiedere ulteriori interventi in futuro:

  • In futuro potremmo aggiungere un 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 le tue esperienze con showPicker().

Parlaci del design

C'è qualcosa in merito a showPicker() che non funziona come previsto? In alternativa, mancano metodi o proprietà necessari 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 dalla specifica?

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

Mostrare il proprio sostegno

Hai intenzione di utilizzare showPicker()? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad 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 esaminato questo articolo. Immagine del calendario di Eric Rothermel su Unsplash.