Menampilkan pemilih browser untuk tanggal, waktu, warna, dan file

François Beaufort
François Beaufort
GitHub

Selama ini, Anda harus menggunakan library widget kustom atau solusi tidak resmi untuk menampilkan pemilih tanggal. Platform web kini dilengkapi dengan metode showPicker() HTMLInputElement, cara kanonis untuk menampilkan pemilih browser tidak hanya untuk tanggal, tetapi juga waktu, warna, dan file.

Latar belakang

Permintaan umum yang kami dengar dari developer web adalah:

Bagaimana cara menampilkan pemilih untuk kontrol seperti tanggal secara terprogram?

Stack Overflow

Jawaban saat ini tidak bagus; jawaban tersebut mengandalkan library eksternal, peretasan CSS, atau perilaku browser tertentu seperti menyimulasikan interaksi pengguna dengan click().

Dengan senang hati kami sampaikan bahwa hari-hari tersebut akan segera berakhir karena platform web memperkenalkan cara kanonis untuk menampilkan pemilih browser untuk elemen <input> dengan jenis berikut: "date", "month", "week", "time", "datetime-local", "color", dan "file". Fitur ini juga akan berfungsi untuk elemen <input> dengan saran yang didukung oleh <datalist> atau "autocomplete" yang juga akan kita bahas dalam artikel ini.

Screenshot alat pilih browser
Pemilih tanggal browser di Chrome desktop, Chrome mobile, Safari desktop, Safari mobile, dan Firefox desktop (Juli 2021).

Cara menampilkan pemilih

Memanggil showPicker() pada elemen <input> akan menampilkan pemilih browser kepada pengguna. Metode ini harus dipanggil sebagai respons terhadap gestur pengguna seperti gestur sentuh atau klik mouse; jika tidak, metode ini akan gagal dengan pengecualian NotAllowedError. Untuk alasan keamanan, pengecualian SecurityError akan terjadi saat dipanggil dalam iframe lintas-origin.

Pemilih browser ditampilkan saat elemen <input> adalah salah satu jenis berikut: "date", "month", "week", "time", "datetime-local", "color", atau "file".

Contoh di bawah menunjukkan cara membuka pemilih tanggal 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>

Pemilih browser juga dapat diisi otomatis dengan item dari <datalist> atau "autocomplete".

Contoh di bawah menunjukkan cara membuka pemilih browser dengan <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>

Deteksi fitur

Untuk memeriksa apakah showPicker() didukung, gunakan:

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

Demo

Demo tersedia di https://cdpn.io/web-dot-dev/fullpage/LEVKVdr agar Anda dapat mencoba semua pemilih yang didukung oleh browser.

Dukungan browser

showPicker() tersedia di Chrome 99 atau yang lebih baru.

Langkah berikutnya

Pada saat penulisan, showPicker() baru tersedia di platform web. Fitur ini mungkin memerlukan pekerjaan tambahan pada masa mendatang:

  • Kita mungkin ingin menambahkan showPicker() serupa ke elemen <select> pada masa mendatang, jika developer web memintanya.
  • Mungkin closePicker() akan berguna, dan kami dapat mempertimbangkan untuk menambahkannya jika developer web memintanya.
  • Kita dapat menambahkan kebijakan izin yang memungkinkan iframe lintas asal menampilkan pemilih browser jika rantai induknya mengizinkannya.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan showPicker().

Beri tahu kami tentang desainnya

Apakah ada sesuatu tentang showPicker() yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang tidak ada yang perlu Anda terapkan untuk mewujudkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan?

  • Laporkan masalah spesifikasi di repo GitHub WHATWG, atau tambahkan pendapat Anda ke masalah yang ada.

Mengalami masalah dengan penerapan?

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dari spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin dan petunjuk sederhana untuk mereproduksi.

Menunjukkan dukungan

Apakah Anda berencana menggunakan showPicker()? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan untuk fitur tersebut.

Kirim tweet ke @ChromiumDev dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Ucapan terima kasih

Terima kasih kepada Joe Medley yang telah meninjau artikel ini. Foto gambar kalender oleh Eric Rothermel di Unsplash.