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

François Beaufort
François Beaufort
GitHub

Uzun bir süre boyunca, tarih seçici göstermek için özel widget kitaplıklarına veya hilelere başvurmanız gerekiyordu. Web platformu artık HTMLInputElement showPicker() yöntemiyle birlikte gönderiliyor. Bu yöntem, yalnızca tarihler için değil, zaman, renk ve dosyalar için de tarayıcı seçici göstermenin standart bir yoludur.

Arka plan

Web geliştiricilerinden sıklıkla aldığımız istekler arasında şunlar yer alıyor:

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

Stack Overflow

Mevcut yanıtlar pek iyi değil. Harici kitaplıklar, CSS hilelerine veya click() ile kullanıcı etkileşimini simüle etme gibi belirli tarayıcı davranışlarına dayanıyor.

Web platformu, "date", "month", "week", "time", "datetime-local", "color" ve "file" türlerine sahip <input> öğeleri için tarayıcı seçiciyi göstermenin standart bir yolunu kullanıma sunduğundan bu günlerin yakında sona ereceğini paylaşmaktan memnuniyet duyuyoruz. Bu özellik, bu makalede de ele alacağımız <datalist> veya "autocomplete" tarafından desteklenen öneriler içeren <input> öğeleri için de işe yarayacaktır.

Tarayıcı seçicilerinin ekran görüntüleri
Chrome masaüstü, Chrome mobil, Safari masaüstü, Safari mobil ve Firefox masaüstü sürümlerindeki 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ı nedeniyle başarısız olur. Güvenlik nedeniyle, çapraz kaynaklı bir iframe'de çağrıldığında SecurityError istisnası atar.

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

Aşağıdaki örnekte, tarayıcıda tarih seçicinin nasıl açılacağı 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" öğelerindeki öğelerle de önceden doldurulabilir.

Aşağıdaki örnekte, <datalist> ile tarayıcı seçicinin nasıl açılacağı 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() değerinin desteklenip desteklenmediğini kontrol etmek için:

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

Demo

Tarayıcı tarafından desteklenen tüm seçicilerle oynamak için https://show-picker.glitch.me/demo.html adresinde bir demo mevcuttur.

Tarayıcı desteği

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

Sırada ne var?

showPicker(), bu makalenin yazıldığı sırada web platformunda yeni bir özelliktir. Bu özelliğin gelecekte daha fazla çalışma gerektirmesi olasıdır:

  • Web geliştiricileri isterse gelecekte <select> öğesine benzer bir showPicker() eklemek isteyebiliriz.
  • closePicker() yararlı olabilir. Web geliştiricileri bunu talep ederse bu özelliği eklemeyi düşünebiliriz.
  • Ana zincirleri izin verdiğinde kaynak farklı iframe'lerin tarayıcı seçicileri göstermesine izin veren bir izin politikası ekleyebiliriz.

Geri bildirim

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

Tasarım hakkında bilgi verin

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

  • WHATWG GitHub deposunda spesifikasyonla ilgili bir sorun gönderin veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorun mu yaşıyorsunuz?

Chrome&#39;un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve sorunun yeniden oluşturulmasıyla ilgili basit talimatlar sağladığınızdan emin olun. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

Destek gösterme

showPicker() kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

@ChromiumDev'e bir tweet göndererek uygulamanızı nerede ve nasıl kullandığınızı bize bildirin.

Teşekkür ederiz

Bu makaleyi inceleyen Joe Medley'e teşekkürler. Unsplash'taki Eric Rothermel tarafından çekilen takvim resmi.