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, hai dovuto ricorrere a librerie di widget personalizzati o a soluzioni alternative. La piattaforma web ora viene fornita con 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 in modo programmatico
un selettore per controlli come la data?

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 utente con click().

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

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

Come mostrare un selettore

La chiamata di 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 tattile o un clic del mouse; in caso contrario, l'operazione non andrà a buon fine e verrà generata un'eccezione NotAllowedError. Per motivi di sicurezza, genererà un'eccezione SecurityError quando viene chiamato in un iframe cross-origin.

Un selettore del browser viene visualizzato quando l'elemento <input> è 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>

Un selettore del browser può anche essere precompilato con 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 delle funzionalità

Per verificare se showPicker() è supportato, utilizza:

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

Demo

Una demo è disponibile all'indirizzo https://cdpn.io/web-dot-dev/fullpage/LEVKVdr per provare tutti i selettori supportati dal browser.

Supporto browser

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

Passaggi successivi

Al momento della stesura, showPicker() è una novità della piattaforma web. La funzionalità potrebbe richiedere ulteriore lavoro in futuro:

  • In futuro potremmo voler aggiungere un showPicker() simile all'elemento <select> se gli sviluppatori web lo richiedono.
  • È possibile che closePicker() sia utile e potremmo prendere in considerazione l'aggiunta se gli sviluppatori web lo richiedono.
  • Potremmo aggiungere un criterio per le autorizzazioni che consenta agli iframe multiorigine di mostrare i selettori del browser quando la catena principale lo consente.

Feedback

Il team di Chrome e la community degli standard web vogliono conoscere le tue esperienze con showPicker().

Descrivi il design

C'è qualcosa in showPicker() che non funziona come previsto? Oppure mancano metodi o proprietà che ti servono 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? O l'implementazione è diversa dalla specifica?

  • Invia una segnalazione di bug all'indirizzo https://new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile e istruzioni semplici per la riproduzione.

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 a @ChromiumDev e facci sapere dove e come lo utilizzi.

Ringraziamenti

Grazie a Joe Medley per aver esaminato questo articolo. Foto dell'immagine del calendario di Eric Rothermel su Unsplash.