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 hack 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, hack CSS, atau perilaku browser tertentu seperti menyimulasikan interaksi pengguna dengan click().

Dengan senang hati kami sampaikan bahwa hal 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". Hal ini juga akan berfungsi untuk elemen <input> dengan saran yang didukung oleh <datalist> atau "autocomplete" yang juga akan kamibahas dalam artikel ini.

Screenshot alat pilih browser
Pemilih tanggal browser di desktop Chrome, perangkat seluler Chrome, desktop Safari, perangkat seluler Safari, dan desktop Firefox (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, parameter ini akan menampilkan pengecualian SecurityError saat dipanggil dalam iframe lintas origin.

Pemilih browser ditampilkan saat elemen <input> adalah salah satu dari 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 ini 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://show-picker.glitch.me/demo.html agar Anda dapat menggunakan semua pemilih yang didukung oleh browser.

Dukungan browser

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

Langkah berikutnya

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

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

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 adakah metode atau properti yang hilang yang Anda perlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan?

  • Ajukan 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 penerapannya berbeda dengan spesifikasinya?

  • Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, dan petunjuk sederhana untuk mereproduksi bug. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan dukungan

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

Kirim tweet ke @ChromiumDev dan beri tahu kami tempat dan cara Anda menggunakannya.

Ucapan terima kasih

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