Tarih, saat, renk ve dosyalar için bir tarayıcı seçici göster

Furkan
François Beaufort
GitHub

Uzun bir süre, tarih seçici göstermek için özel widget kitaplıklarına veya ipuçlarına başlamak zorunda kaldınız. Web platformu artık HTMLInputElement showPicker() yöntemiyle gönderilir. Bu, tarayıcı seçiciyi yalnızca tarihler, aynı zamanda zaman, renk ve dosyalar için göstermenin standart bir yoludur.

Arka plan

Web geliştiricilerinden aldığımız sık bir istek:

Tarih gibi kontroller için
seçiciyi programatik olarak nasıl gösterebilirim?

Stack Overflow

Mevcut yanıtlar pek iyi değildir. Bunlar harici kitaplıklardan, CSS saldırılarına veya click() ile kullanıcı etkileşiminin simülasyonunu yapmak gibi belirli tarayıcı davranışlarına dayanır.

Web platformu "date", "month", "week", "time", "datetime-local", "color" ve "file" gibi <input> öğeleri için tarayıcı seçici göstermek için standart bir yöntem sunduğunda bu günlerin yakında sona ereceğini bildirmekten mutluluk duyuyorum. Ayrıca, bu makalede ele alacağımız <datalist> veya "autocomplete" tarafından desteklenen önerilere sahip <input> öğeleri için de kullanılabilir.

Tarayıcı seçicilerin ekran görüntüleri
Chrome masaüstü, Chrome mobil, Safari masaüstü, Safari mobil ve Firefox masaüstünde tarayıcı tarih seçicileri (Temmuz 2021).

Seçici nasıl gösterilir?

<input> öğesinde showPicker() çağrıldığında kullanıcıya bir tarayıcı seçici gösterilir. Dokunma hareketi veya fare tıklaması gibi bir kullanıcı hareketine yanıt olarak çağrılmalıdır; aksi takdirde NotAllowedError istisnasıyla başarısız olur. Kaynaklar arası iframe'de çağrıldığında, güvenlik nedeniyle SecurityError istisnası devreye girer.

<input> öğesi şu türlerden biri olduğunda bir tarayıcı seçici gösterilir: "date", "month", "week", "time", "datetime-local", "color" veya "file".

Aşağıdaki örnekte, bir tarayıcı tarih seçiciyi nasıl açacağınız gösterilmektedir.

<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>

Tarayıcı seçici, <datalist> veya "autocomplete" aracındaki öğelerle de önceden doldurulabilir.

Aşağıdaki örnekte, <datalist> ile bir tarayıcı seçiciyi nasıl açacağınız gösterilmektedir.

<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>

Özellik algılama

showPicker() hizmetinin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

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

Demo

Tarayıcı tarafından desteklenen tüm seçicilerle oynayabileceğiniz bir demoyu https://show-picker.glitch.me/demo.html adresinde bulabilirsiniz.

Tarayıcı desteği

showPicker(), Chrome 99 veya sonraki sürümlerde kullanılabilir.

Sırada ne var?

Bu yazının yazıldığı tarihte showPicker(), web platformunda yenidir. Bu özellik için gelecekte ek çalışma gerekebilir:

  • Web geliştiricilerinin talep etmesi durumunda, gelecekte <select> öğesine benzer bir showPicker() eklemek isteyebiliriz.
  • closePicker() yararlı olabilir ve web geliştiricileri isterse bunu eklemeyi düşünebiliriz.
  • Kaynaklar arası iframe'lerin, üst zincirleri izin verdiğinde tarayıcı seçicileri göstermesine olanak tanıyan bir izin politikası ekleyebiliriz.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, showPicker() ile ilgili deneyimlerinizi öğrenmek istiyor.

Bize tasarım hakkında bilgi verin

showPicker() ile ilgili beklediğiniz gibi çalışmayan bir şey mi var? Ya da fikrinizi uygulamak için gereken eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok ayrıntı ve yeniden oluşturma işlemi için basit talimatlar eklediğinizden emin olun. Glitch hızlı ve kolay yeniden göndermeler paylaşmak için idealdir.

Desteği göster

showPicker() uygulamasını kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçilerine, bu özellikleri desteklemenin ne kadar kritik olduğunu gösterir.

@ChromiumDev adresine tweet göndererek nerede ve nasıl kullandığınızı bize bildirin.

Teşekkür

Bu makaleyi incelediğiniz için Joe Medley'ye teşekkür ederiz. Eric Rothermel'in Unsplash'teki takvim resmi fotoğrafı.