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 geçici çözümlere 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, aynı zamanda saat, renk ve dosyalar için de tarayıcı seçici göstermenin standart bir yoludur.

Arka plan

Web geliştiricilerden gelen sık bir istek şöyledir:

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

Stack Overflow

Mevcut yanıtlar iyi değil. Harici kitaplıklara, CSS hack'lerine veya click() ile kullanıcı etkileşimini simüle etme gibi belirli tarayıcı davranışlarına dayanıyorlar.

Web platformu, <input> öğeleri için tarayıcı seçiciyi göstermenin standart bir yolunu sunuyor. Bu öğeler şu türleri içerir: "date", "month", "week", "time", "datetime-local", "color" ve "file". Bu nedenle, bu tür öğeler için tarayıcı seçiciyi göstermenin standart bir yolu sunulacağından bu günlerin yakında sona ereceğini bildirmekten memnuniyet duyuyorum. <input> öğeleri için de çalışır. Bu öğelerde, <datalist> veya "autocomplete" tarafından desteklenen öneriler bulunur. Bu öğeleri de bu makalede ele alacağız.

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

Seçici gösterme

<input> öğesinde showPicker() işlevini çağırmak, kullanıcıya bir tarayıcı seçici gösterir. 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. Güvenlik nedeniyle, kaynaklar arası bir iframe'de çağrıldığında SecurityError istisnası oluşturur.

<input> öğesi şu türlerden biriyse 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"'deki öğ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() öğesinin 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 deneme yapabileceğiniz bir demo https://cdpn.io/web-dot-dev/fullpage/LEVKVdr adresinde mevcuttur.

Tarayıcı desteği

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

Sırada ne var?

Bu makalenin yazıldığı sırada showPicker(), web platformunda yeni bir özelliktir. Bu özellik için gelecekte ek çalışmalar yapılması gerekebilir:

  • Web geliştiriciler isterse gelecekte showPicker() öğesine benzer bir <select> ekleyebiliriz.
  • closePicker() işe yarayabilir. Web geliştiriciler isterse bu özelliği ekleyebiliriz.
  • Üst zincir izin verdiğinde, kaynaklar arası iframe'lerin tarayıcı seçicilerini göstermesine olanak tanıyan 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, beklediğiniz gibi çalışmayan bir şey var mı? Ya da fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

Uygulamayla ilgili sorun mu yaşıyorsunuz?

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

  • https://new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve yeniden üretme için basit talimatlar ekleyin.

Desteğinizi gösterme

showPicker() kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bu özelliklerin desteklenmesinin ne kadar önemli olduğunu gösterir.

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

Teşekkür

Bu makaleyi incelediği için Joe Medley'e teşekkür ederiz. Takvim resmi: Eric Rothermel tarafından Unsplash'te çekilen fotoğraf.