Selektor dat HTML5

Niedawno opublikowałem, że zdecydowałem się użyć Opery w moich pokazach HTML5 podczas RMOUG Training Days 2011. Jak wspomniałem w tym poście, dużym powodem dodania przeglądarki Opera do zestawu jest to, że obsługuje ona niektóre funkcje HTML5 lepsze niż inne przeglądarki. Ten post zilustruje jeden z tych przypadków: selektory dat HTML5.

Jedną z małych, ale przyjemnych rzeczy w korzystaniu z Flex lub biblioteki JavaScript, takiej jak JQuery, jest dostępność wbudowanych mechanizmów dla przyjaznych dla użytkownika elementów sterujących. W szczególności zawsze docenia się dobry wybór dat.

HTML5 ma obecnie oferować standardowy widżet do wybierania dat, którego można używać z tagami HTML. W tym poście przyjrzę się stanowi selektorów dat HTML5 w ostatnich wersjach niebetowych pięciu popularnych przeglądarek internetowych (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 i Opera 11).

HTML obsługuje różne pola wejściowe za pośrednictwem tagu input. Różne typy pól wejściowych są określane za pomocą atrybutu inputelementu type. HTML5 znacznie zwiększa liczbę dostępnych elementów, typektóre można określić. Kilka nowych wartości dla typeatrybutu należą te związane z data / czas: date, datetime, datetime-local, month, week, i time. Każdy z nich został przedstawiony w poniższym fragmencie kodu HTML.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

Spośród pięciu przeglądarek ja poprzednio wymienionych, Opera zapewnia zdecydowanie najbardziej wyrafinowanych realizacji data / czas types z inputtagiem. Zaczynając od pozytywów, kilka pierwszych zrzutów ekranu pokazuje, jak ten prosty kod HTML renderuje się w Operze 11.

Opera 11 Wstępne renderowanie strony

Opera 11 Znacznik wejściowy „date” Atrybut

Opera 11 Znacznik wejściowy Atrybut „datetime”

Opera 11 Znacznik wejściowy Atrybut „datetime-local”

Opera 11 Znacznik wejściowy Atrybut „miesiąc”

Wdrożenie Opery podkreśla cały wybrany miesiąc.

Tag wejściowy Opera 11 - atrybut „week”

Opera podkreśla wybrany tydzień.

Opera 11 Znacznik wejściowy Atrybut „time”

Opera 11 - zaznaczono wszystkie pola wejściowe

Implementacja w Operze pól wprowadzania daty / czasu jest imponująca. Chciałbym, aby to samo można było powiedzieć o innych przeglądarkach innych niż beta. Niestety, inne przeglądarki nie zapewniają obsługi tych typów pól w żadnym stopniu zbliżonym do tego eleganckiego. W rzeczywistości nie sądzę, aby warto było tutaj umieszczać wszystkie zrzuty ekranu. Zamiast tego po wypełnieniu wszystkich pól po prostu pokazuję zrzut ekranu każdego z nich. W większości przypadków przeglądarki po prostu traktowały te pola jako proste pola typu „tekstowego”.

Firefox 3.6 Date Pickers: to tylko tekst

Internet Explorer 8 Date Pickers: to tylko tekst

Safari 5 Date Pickers: to tylko tekst z wyróżnieniem ostrości

Chrome 8 Date Pickers: nie całkiem

Chociaż nie jest to tak eleganckie jak traktowanie pól daty / czasu przez Operę, przeglądarka Chrome traktuje te pola jako coś więcej niż tekst i ogranicza to, co można wprowadzić do pól. Niestety, nie ma ładnych wyskakujących okienek wyboru daty / czasu, takich jak Opera. Mimo to skupione podświetlanie pól jest przyjemne, a fakt, że wybrane dane są w pewnym stopniu datą / godziną, jak w formacie, pomaga.

Wniosek

Z niecierpliwością czekam na dzień, w którym główne przeglądarki będą konsekwentnie obsługiwać ustandaryzowane kontrolki daty / czasu, dzięki czemu proste znaczniki HTML „wejściowe” z odpowiednimi atrybutami będą wyświetlać eleganckie i stylistyczne selektory daty / czasu w dowolnej przeglądarce. Opera 11 jest obecnie liderem w branży i zapewnia najlepszą ilustrację tego, co może być.

Ta historia, „HTML5 Date Picker”, została pierwotnie opublikowana przez JavaWorld.