- 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.
![Ekran formatów dat](https://developer.chrome.google.cn/static/blog/quick-faqs-on-input-type-date-in-google-chrome/image/date-formats-screen-b6171ee0a4b62.jpg?hl=pl)
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();