Bir tarayıcının <input type = 'date'> öğesini destekleyip desteklemediğini nasıl anlarım


83

Olası Yineleme:
HTML5 Tür Algılama ve Eklenti Başlatma

<input type=date>

Kullanıcı aracısı tarafından sağlanan (isteğe bağlı) bir veri seçici ile bir girdi oluşturmalı, ancak henüz yaygın olarak desteklenmediğinden, bir jQuery UI Datepicker kullanıyoruz. Tarayıcıların kendi tarih seçicilerini kullanmalarına ve yalnızca tarayıcıda böyle bir şey yoksa jQuery UI'ye geri dönmelerine nasıl izin verebiliriz?

Şu anda sadece Opera'nın yerleşik bir tarih seçici olduğunu düşünüyorum, ancak Opera için bir test kesinlikle kötü olacaktır. Bu özelliğin algılanmasının bir yolu var mı (taşınabilir bir şekilde yapabiliyorsa)?


1
Tarih desteğini saptamak, farklı tarayıcıların tarihleri ​​farklı düzeylerde desteklemesi nedeniyle karmaşıktır. Bazıları güzel bir takvim tarihi seçicisi sunuyor. Diğerleri bunun bir tarih gibi göründüğünü doğruluyor.
rjmunro

2
Bu soruyu tam olarak neden sordum. Tarih girişlerini anladığını iddia edip etmediğini, tarayıcının bir tarih seçici olup olmadığını bilmek istedim. AFAICT bir kopya değildir ve aşağıdaki cevaplar yardımcı olmamaktadır. Güncellemeye veya yarışmaya hiç katılmadım. Sadece gittim <input class=datepicker>ve her zaman jquery ui datepicker'ı (eski moda yol) kullanıyorum.
DaedalusFall

1
Masaüstü tarayıcılarda, tarih girişi kullanıcı arayüzünün genellikle istenen bir şeyi bıraktığına dikkat edilmelidir. Destekleseler bile, kullanmak istemeyebilirsiniz. Bu sorun, mobil tarayıcıları etkilemiyor gibi görünüyor.
zengin

Yanıtlar:


134

Aşağıdaki yöntem, tarayıcıların çoğu tarafından bazı giriş türlerinin desteklenip desteklenmediğini kontrol eder:

function checkInput(type) {
    var input = document.createElement("input");
    input.setAttribute("type", type);
    return input.type == type;
}

Ancak, simonox'un yorumlarda belirtildiği gibi , bazı tarayıcılar (Android stok tarayıcıları olarak) bazı türleri (tarih olarak) desteklediklerini iddia ediyorlar, ancak tarih girişleri için bir kullanıcı arayüzü sunmuyorlar. Bu yüzden simonox , tarih alanına geçersiz bir değer ayarlama hilesini kullanarak uygulamayı geliştirdi. Tarayıcı bu girişi temizlerse, bir tarih seçici de sunabilir !!!

function checkDateInput() {
    var input = document.createElement('input');
    input.setAttribute('type','date');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

8
Android hisse senedi tarayıcısında çalışmıyor, doğru döndürüyor ancak tarih seçici için desteği yok
Björn Andersson

33
Tür özniteliğinin sorulması, tüm Android stok tarayıcılarında çalışmaz. Htat'ı inputType = date desteklediklerini iddia ediyorlar, ancak tarih girişleri için bir UI sunmuyorlar. Bu özellik algılama benim için çalıştı: function () {var el = document.createElement ('input'), notADateValue = 'not-a-date'; el.setAttribute ('tür', 'tarih'); el.setAttribute ('değer', notADateValue); dönüş! (el.value === notADateValue); } İşin püf noktası, tarih alanına geçersiz bir değer belirlemektir. Tarayıcı bu girişi temizlerse, bir tarih seçici de sunabilir.
simonox

3
'! ===' = '! ==' demek mi istiyorsunuz? :)
Matty Balaam

1
@MattyBalaam Açıkçası bu bir sözdizimi hatasıydı. Bunu düzelttim :)
Ionică Bizău

Mükemmel çalışıyor. Diğer HTML5 türlerini algılamak için bu yöntemi kolayca genişletebilirsiniz.
Gusstavv Gil
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.