- Ten artykuł napisał inżynier oprogramowania Chrome Kent Tamura.
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 wyświetlić w Chrome przydatny widget kalendarza.
Otrzymujemy wiele opinii od deweloperów, dlatego chcielibyśmy wyjaśnić kilka kwestii, które wyjaśniamy w tym artykule, by w pełni wykorzystać możliwości selektora dat.
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ść?
Pole input.value zawsze jest zwracane jako yyyy-mm-dd, niezależnie od formatu prezentacji.
Jakiego formatu może być wartość wejściowa?
Podczas ustawiania parametru input.value programowo wartość przyjmuje tylko styl yyyy-mm-dd niezależnie od formatu wyświetlania zarówno wartości początkowej, jak i wartości wstrzykniętej przez JavaScript.
Jak zmienić wygląd selektora daty?
Obecnie nie można zmienić stylu wyglądu selektora daty. W WebKit oferowaliśmy wcześniej sposoby określania stylu elementów sterujących formularza za pomocą właściwości CSS -webkit-appearance lub selektora pseudoklas ::-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 narzędziem jQuery DatePikker a natywnym 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, użyj input[type=text] zamiast input[type=date]. 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();