Pola dat w formularzach HTML5

W rozdziale:

Widżet wyboru daty

W języku HTML 4 nie ma kontrolki wyboru daty. Lukę tę załatano w licznych bibliotekach JavaScript (Dojo, jQuery UI, YUI, Closure Library), ale to oczywiście wymaga zastosowania dodatkowej biblioteki na stronie internetowej.

W HTML5 jednak jest już kontrolka wyboru daty i nie trzeba do jej utworzenia używać żadnych skryptów. Tak naprawdę to jest aż sześć takich kontrolek: dla daty; miesiąca; tygodnia; godziny; daty i godziny oraz daty, godziny i strefy czasowej.

Jak na razie z obsługą tego jest… krucho.

Obsługa kontrolki wyboru daty
Pole wejściowe	IE	Firefox	Safari	Chrome	Opera	iPhone	Inne przeglądarki
`type="date"`	·	·	5.0+	20.0+	9.0+	5.0+	·
`type="datetime"`	·	·	5.0+	·	9.0+	5.0+	·
`type="datetime-local"`	·	·	5.0+	·	9.0+	5.0+	·
`type="month"`	·	·	5.0+	·	9.0+	5.0+	·
`type="week"`	·	·	5.0+	·	9.0+	5.0+	·
`type="time"`	·	·	5.0+	20.0+	9.0+	5.0+	·

W Operze kontrolka <input type="date"> wygląda tak:

Jeśli dodatkowo potrzebujesz godziny, to Opera obsługuje też kontrolkę <input type="datetime">:

Gdybyś potrzebował miesiąca i roku (np. do podania daty wygaśnięcia karty kredytowej), Opera obsługuje też <input type="month">:

Rzadziej potrzebna jest możliwość wpisania tygodnia roku, ale w razie czego masz do dyspozycji kontrolkę <input type="week">:

I w końcu można też utworzyć kontrolkę wyboru godziny przy użyciu elementu <input type="time">:

Jest duże prawdopodobieństwo, że wkrótce kontrolki te będą obsługiwane też przez pozostałe przeglądarki. Ale podobnie jak jest w przypadku type="email" i innych typów pól wejściowych, przeglądarki nie obsługujące tych kontrolek wyświetlą zwykłe pola tekstowe. Jeśli chcesz, możesz używać kontrolki <input type="date"> i jej podobnych, uszczęśliwiając w ten sposób użytkowników Operi iOS-a i poczekać, aż pozostałe przeglądarki nadgonią zaległości. Jeśli jednak jesteś realistą, to możesz używać pola <input type="date">, wykrywać czy przeglądarka standardowo obsługuje kontrolki dat i czasu i w razie potrzeby stosować rozwiązanie awaryjne, np. oparte na wykorzystaniu biblioteki Dojo, jQuery UI, YUI, Closure Library lub jakiejś innej.

Kontrolka wyboru daty z rozwiązaniem awaryjnym

<form>
  <input type="date">
</form>
...
<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {
    // Brak standardowej kontrolki wyboru daty :(
    // Użyj biblioteki Dojo/jQueryUI/YUI/Closure do jej utworzenia
    // i dynamiczne podmień element <input>.
  }
</script>

Aplikacje offline Kurs HTML5 Mikrodane