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

Prancis Beaufort
François Beaufort
GitHub

Untuk waktu yang lama, Anda harus menggunakan library atau peretasan widget kustom untuk menampilkan pemilih tanggal. Platform web kini dikirimkan dengan metode showPicker() HTMLInputElement, cara kanonis untuk menampilkan alat pilih browser tidak hanya untuk tanggal, tetapi juga waktu, warna, dan file.

Latar belakang

Permintaan yang sering kami dengar dari developer web adalah:

Bagaimana cara secara terprogram
menampilkan alat pilih untuk kontrol seperti tanggal?

Stack Overflow

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

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

Screenshot pemilih browser
Pemilih tanggal browser di desktop Chrome, Chrome seluler, desktop Safari, Safari seluler, dan desktop Firefox (Juli 2021).

Cara menampilkan pemilih

Memanggil showPicker() pada elemen <input> akan menampilkan alat pilih browser kepada pengguna. Panggilan ini harus dipanggil sebagai respons terhadap gestur pengguna seperti gestur sentuh atau klik mouse; jika tidak, SDK akan gagal dengan pengecualian NotAllowedError. Demi keamanan, metode ini akan menampilkan pengecualian SecurityError saat dipanggil dalam iframe lintas origin.

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

Contoh di bawah ini menunjukkan cara membuka pemilih tanggal di 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 alat pilih 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 bermain dengan semua pemilih yang didukung oleh browser.

Dukungan browser

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

Langkah berikutnya

Pada saat menulis email ini, showPicker() adalah pengguna baru di platform web. Fitur ini mungkin memerlukan perbaikan tambahan di masa mendatang:

  • Kita mungkin ingin menambahkan showPicker() yang serupa ke elemen <select> di masa mendatang, jika developer web memintanya.
  • closePicker() mungkin berguna, dan kami dapat mempertimbangkan untuk menambahkannya jika developer web memintanya.
  • Kita dapat menambahkan kebijakan izin yang memungkinkan iframe lintas origin menampilkan alat pilih browser saat rantai induknya memungkinkannya.

Masukan

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

Beri tahu kami tentang desainnya

Apakah ada sesuatu pada showPicker() yang tidak berfungsi seperti yang Anda harapkan? Atau ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Punya pertanyaan atau komentar tentang model keamanan?

  • Ajukan masalah spesifikasi di repo GitHub WhatWG, atau tambahkan pendapat Anda ke masalah yang sudah ada.

Mengalami masalah dengan penerapan?

Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

  • Laporkan bug di https://new.crbug.com. Pastikan Anda menyertakan detail sebanyak mungkin, dan petunjuk sederhana untuk mereproduksi. Glitch berfungsi sangat baik untuk berbagi repro dengan cepat dan mudah.

Tampilkan dukungan

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

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

Ucapan terima kasih

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