Szybkie najczęstsze pytania na temat wprowadzania[type=date] w Google Chrome

  • 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

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();