- Bu makale, bir Chrome yazılım mühendisi Kent Tamura tarafından yazılmıştır.
Google Chrome, Chrome 20'den beri bir tarih seçiciyi desteklemektedir. Kullanıcı, input öğesinin type özelliğini date değerine ayarlayarak ok düğmesini tıklayabilir. Bu durumda Chrome'da hoş bir takvim widget'ı açılır.
Geliştiricilerden çok sayıda geri bildirim aldığımızdan, bu makalede tarih seçiciden en iyi şekilde nasıl yararlanacağınıza ilişkin birkaç noktaya açıklık getirmek istiyoruz.
Yerel ayar, giriş değerinin tarih biçimini nasıl etkiler?
Kullanıcılar, input[type=date] kutusundaki metin alanına bir tarih değeri yazabilir ve kutuda gri metin olarak gösterilen tarih biçimi kullanılabilir. Bu biçim, işletim sisteminin ayarından alınır.
Şu anda biçimi belirten bir standart olmadığından web yazarları tarih biçimini değiştiremez.
Sunucuya gönderilirken giriş değeri nasıl gösterilir?
HTTP İsteğindeki GET / POST gibi input[type=date] öğesinden yorumlanan tarih değeri yyyy-mm-dd olarak biçimlendirilir.
Giriş değeri ne tür bir biçim döndürür?
input.value, sunu 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 başlangıç değerinin hem de yerleştirilen JavaScript değerinin sunu 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ştiririm?
Şu anda tarih seçicinin görünümünün stilini belirleyemezsiniz. WebKit'te, daha önce -webkit-appearance CSS mülkü veya ::-webkit-foo sözde sınıf seçici ile form denetimlerinin stilini belirlemenin yollarını sunmuştuk. Ancak takvim pop-up'ı, <select> için bir pop-up menüsü gibi dokümandan ayrı olduğundan ve şu anda alt öğelerindeki stillerin nasıl kontrol edileceğine ilişkin bir standart olmadığından WebKit'te bu tür yollar sunmamaktadır.
jQuery Datepicker ve yerel tarih seçici arasındaki çakışmaları nasıl önleyebilirim?
Google Chrome'daki input[type=date] üzerinde jQuery Datepicker'ı denediyseniz, hem jQuery kullanıcı arayüzünün hem de yerel takvim pop-up'ının takvimlerinin çakıştığını fark etmiş olabilirsiniz.
jQuery Datepicker'ı tüm platformlara uygulamak istiyorsanız input[type=date] yerine input[type=text] politikasını kullanın. Yalnızca Google Chrome değil, iOS Safari, BlackBerry tarayıcısı ve Opera da input[type=date] için kendi kullanıcı arayüzlerine sahiptir ve input[type=date] ile tüm platformlarda birleşik bir kullanıcı arayüzüne ulaşmanın şu anda herhangi bir yolu yoktur.
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();