- Bu makale, Chrome yazılım mühendisi Kent Tamura tarafından yazılmıştır.
Daha önce fark etmiş olabileceğiniz gibi, Google Chrome 20 sürümünden beri tarih seçiciyi desteklemektedir. Kullanıcı, input öğesinin type özelliğini date olarak ayarlayarak ok düğmesini tıklayabilir. Chrome, güzel bir takvim widget'ı gösterir.
Geliştiricilerden çok sayıda geri bildirim aldığımız için bu makalede tarih seçiciyi en iyi şekilde nasıl kullanabileceğinizle ilgili birkaç noktayı açıklığa kavuşturmak istiyoruz.
Yerel ayar, giriş değerinin tarih biçimini nasıl etkiler?
Kullanıcılar, input[type=date] öğesinin metin alanına bir tarih değeri yazabilir. Bu tarih değeri, kutuda gri metin olarak gösterilen tarih biçiminde olmalıdır. Bu biçim, işletim sisteminin ayarından alınır.
Şu anda biçimi belirtecek standartlar olmadığından web yazarlarının tarih biçimini değiştirmesi mümkün değildir.
Giriş değeri bir sunucuya gönderilirken nasıl temsil edilir?
HTTP İsteğindeki input[type=date] parametresinden yorumlanan tarih değeri (ör. GET / POST) yyyy-mm-dd olarak biçimlendirilir.
Giriş değeri ne tür bir biçim döndürüyor?
input.value, sunum biçiminden bağımsız olarak her zaman yyyy-mm-dd olarak döndürülür.
Giriş değeri ne tür bir biçimi kabul eder?
input.value programatik olarak ayarlanırken değer, hem ilk değer hem de JavaScript'in eklediği değer için sunum biçiminden bağımsız olarak yalnızca yyyy-mm-dd stilini kabul eder.
Tarih seçicinin görünümünü nasıl değiştirebilirim?
Şu anda tarih seçicinin görünümünü biçimlendiremezsiniz. WebKit'te, daha önce -webkit-appearance CSS mülkü veya ::-webkit-foo sözde sınıf seçicisiyle form kontrollerine stil ekleme yöntemlerini sunmuştuk. Ancak takvim pop-up'ı, <select> için bir pop-up menü gibi belgeden ayrı olduğu için WebKit'te bu tür yöntemler sunmaz ve şu anda alt öğelerindeki stilin nasıl kontrol edileceğine dair bir standart yoktur.
jQuery Datepicker ile yerel tarih seçici arasındaki çakışmaları nasıl önleyebilirim?
Google Chrome'da input[type=date] üzerinde jQuery Datepicker'ı denediyseniz hem jQuery UI hem de yerel takvim pop-up'ının takvimlerinin çakıştığını fark etmiş olabilirsiniz.
jQuery Datepicker'ı tüm platformlarda uygulamak istiyorsanız input[type=date] yerine input[type=text] kullanın. Yalnızca Google Chrome değil, iOS Safari, BlackBerry tarayıcı ve Opera da input[type=date] için kendi kullanıcı arayüzlerine sahiptir. Şu anda input[type=date]'ü kullanan tüm platformlarda birleşik bir kullanıcı arayüzü elde etmek mümkün değildir.
jQuery Datepicker'ı yalnızca input[type=date] desteği olmayan platformlarda uygulamak istiyorsanız Modernizr'ı veya aşağıdaki kodu kullanabilirsiniz:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();