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

Francesco Beaufort
François Beaufort
GitHub

Per molto tempo è stato necessario ricorrere a librerie di widget personalizzati o hack per mostrare un selettore di date. La piattaforma web ora viene fornita con il metodo showPicker() HTMLInputElement, un modo canonico per mostrare un selettore del browser non solo per le date, ma anche per ora, colore e file.

Contesto

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, hacker CSS o comportamenti specifici del browser come la simulazione di un'interazione utente con click().

Sono felice di informarti che quei giorni termineranno non appena la piattaforma web introdurrà 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 forniti da <datalist> o "autocomplete", di cui parleremo anche in questo articolo.

Screenshot dei selettori del browser
Selettori della data del browser in Chrome per desktop, Chrome per dispositivi mobili, Safari per computer, Safari per dispositivi mobili e Firefox per computer (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 tocco o clic del mouse, altrimenti non riuscirà, con un'eccezione NotAllowedError. Per motivi di sicurezza, genera un'eccezione SecurityError quando viene richiamata in un iframe multiorigine.

Un selettore del browser viene mostrato 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 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 delle funzionalità

Per verificare se showPicker() è supportato, utilizza:

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

Demo

All'indirizzo https://show-picker.glitch.me/demo.html è disponibile una demo per giocare con tutti i selettori supportati dal browser.

Supporto del browser

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

Passaggi successivi

Al momento della scrittura, showPicker() non ha mai utilizzato la piattaforma web. La funzionalità potrebbe richiedere ulteriori operazioni in futuro:

  • In futuro potremmo voler aggiungere un elemento showPicker() simile all'elemento <select>, se gli sviluppatori web lo richiedono.
  • È possibile che closePicker() possa essere utile e potremmo aggiungerlo se gli sviluppatori web lo richiedono.
  • Potremmo aggiungere un criterio di autorizzazione che consente 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à di cui hai bisogno per implementare la tua idea? Hai domande o commenti 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 possibile di dettagli e di semplici istruzioni per la riproduzione. Glitch: è un'ottima soluzione per condividere riproduzioni facili e veloci.

Mostra supporto

Hai intenzione di utilizzare showPicker()? Il 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 letto questo articolo. Foto dell'immagine del calendario di Eric Rothermel su Unsplash.