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

Eiji Kitamura
Eiji Kitamura

  • Ten artykuł został napisany przez inżyniera oprogramowania Chrome Kenta Tamury.

Jak być może wiesz, Google Chrome obsługuje selektor daty od wersji Chrome 20. Wystarczy ustawić atrybut type elementu input na date, aby użytkownik mógł kliknąć przycisk strzałki, a Chrome wyświetli fajny widżet kalendarza.

Ponieważ otrzymaliśmy wiele opinii od deweloperów, chcemy wyjaśnić w tym artykule kilka słów o tym, jak najlepiej wykorzystać selektor daty.

Jak ustawienia regionalne wpływają na format daty wartości wejściowej?

Użytkownicy mogą wpisać w polu tekstowym input[type=date] wartość daty przy użyciu formatu daty wyświetlanego w polu w postaci szarego tekstu. Jest on pobierany z ustawień systemu operacyjnego.

Ekran formatów daty

Autorzy stron internetowych nie mogą zmieniać formatu daty, ponieważ obecnie nie istnieją standardy, które umożliwiałyby ich określanie.

Jak wartość wejściowa jest reprezentowana podczas wysyłania danych do serwera?

Wartość daty zinterpretowana z input[type=date] w żądaniu HTTP, np. GET / POST, będzie miała format yyyy-mm-dd.

Jaki format zwraca wartość wejściowa?

Element input.value zawsze zwraca wartość yyyy-mm-dd niezależnie od formatu prezentacji.

Jaki format akceptuje wartość wejściowa?

Gdy ustawiasz element input.value w sposób zautomatyzowany, wartość akceptuje tylko styl yyyy-mm-dd niezależnie od formatu prezentacji zarówno wartości początkowej, jak i wartości wstawionej przez JavaScript.

Jak zmienić wygląd selektora dat?

Obecnie nie można zmienić stylu wyglądu selektora dat. Wcześniej w WebKit można było zmieniać styl elementów sterujących formularza za pomocą właściwości CSS -webkit-appearance lub selektora pseudoklasy ::-webkit-foo. Wyskakujące okienko kalendarza jednak nie udostępnia takich sposobów w WebKit, ponieważ jest ono oddzielone od dokumentu, np. w menu w elemencie <select>. Obecnie nie ma standardu kontrolowania stylu elementów podrzędnych.

Jak uniknąć konfliktów między jQuery Datepicker a natywnym selektorem dat?

Jeśli wypróbowałeś jQuery Datepicker w przeglądarce input[type=date] w Google Chrome, możesz zauważyć pokrywające się kalendarze interfejsu użytkownika JQuery i natywnego wyskakującego okienka kalendarza. 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ądarki BlackBerry i Opera mają własny interfejs dla input[type=date]. Obecnie nie ma sposobu, by uzyskać ujednolicony interfejs na wszystkich platformach, używając input[type=date]. Jeśli chcesz zastosować jQuery Datepicker tylko na platformach, które nie obsługują input[type=date], możesz użyć narzędzia 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();