- Ten artykuł został napisany przez Kenta Tamarę, inżyniera oprogramowania w Chrome.
Jak już pewnie zauważyłeś/zauważyłaś, od wersji 20 przeglądarka Google Chrome obsługuje datownik. Wystarczy ustawić atrybut type elementu input na date, a użytkownik będzie mógł kliknąć przycisk strzałki, aby otworzyć w Chrome ładny widżet kalendarza.
Otrzymaliśmy wiele opinii od deweloperów, dlatego w tym artykule chcielibyśmy wyjaśnić kilka kwestii związanych z najlepszym wykorzystaniem selektora daty.
Jak ustawienia regionalne wpływają na format daty wartości wejściowej?
Użytkownicy mogą wpisać wartość daty w polu tekstowym w elementach input[type=date], a format daty jest wyświetlany w polu jako szary tekst. Ten format jest uzyskiwany z ustawienia systemu operacyjnego.
Autorzy stron internetowych nie mogą zmienić formatu daty, ponieważ obecnie nie ma standardów określających format.
Jak jest reprezentowana wartość wejściowa podczas wysyłania na serwer?
Wartość daty interpretowana z input[type=date] w żądaniu HTTP, np. GET / POST, będzie miała format yyyy-mm-dd.
Jaki format ma zwracana wartość?
Wartość input.value jest zawsze zwracana jako yyyy-mm-dd niezależnie od formatu prezentacji.
Jakiego formatu może być wartość wejściowa?
Podczas ustawiania parametru input.value programowo wartość akceptuje tylko styl yyyy-mm-dd niezależnie od formatu prezentacji zarówno wartości początkowej, jak i wartości wstrzykniętej przez JavaScript.
Jak zmienić wygląd selektora daty?
Obecnie nie można nadać styla wyglądowi selektora daty. W WebKit wcześniej udostępniliśmy sposoby stylizowania elementów sterujących w formularzu za pomocą właściwości CSS -webkit-appearance lub selektora pseudoklasy ::-webkit-foo. Jednak w WebKit nie ma takich opcji w przypadku wyskakującego okienka kalendarza, ponieważ jest ono oddzielone od dokumentu, podobnie jak menu wyskakujące <select>. Nie ma też obecnie standardu określającego sposób kontrolowania stylów elementów podrzędnych.
Jak uniknąć konfliktów między jQuery Datepicker a wbudowanym selektorem daty?
Jeśli korzystasz z plugina jQuery Datepicker w witrynie input[type=date] w Google Chrome, możesz zauważyć nakładanie się kalendarzy interfejsu jQuery i kalendarza w wyskakującym okienku.
Jeśli chcesz zastosować jQuery Datepicker na wszystkich platformach, zamiast input[type=date] użyj input[type=text]. Nie tylko Google Chrome, ale też Safari na iOS, przeglądarka BlackBerry i Opera mają własne interfejsy input[type=date]. Obecnie nie ma możliwości ujednolicenia interfejsu na wszystkich platformach, które korzystają z input[type=date].
Jeśli chcesz zastosować jQuery Datepicker tylko na platformach bez obsługi input[type=date], możesz użyć Modernizr lub tego kodu:
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();