Date Picker z wykorzystaniem możliwości HTML5


23 października 2012 / Michał Kortas


W przerwie pomiędzy wpisami, które przedstawiają Wam najciekawsze rozszerzenia najpopularniejszych systemów zarządzania treścią, postanowiłem zamieścić wpis na temat niewielkiej, aczkolwiek bardzo przydatnej funkcji języka HTML5. Jest nią standardowy „Date Picker„, za pomocą którego, w sposób półautomatyczny, wstawimy wybraną datę w polu <input>  naszego formularza. Dotychczas należało korzystać z pobocznych rozwiązań, takich jak Date Picker w jQuery, czy w (sic!) JavaScript. Niestety – wspomnę już o tym na samym początku – problemem jest dotychczasowo słabe wdrożenie owej funkcji do przeglądarek. Na chwilę obecną pełną obsługę zapewnia nam tylko Opera. Chrome natomiast wyświetla poprawnie tylko pierwszy przykład. Mam jednak nadzieję, że taka sytuacja niedługo odejdzie w zapomnienie. Sam wpis polecam potraktować czysto jako ciekawostkę, którą prawdopodobnie za jakiś czas będziemy wdrażać na stronach www. Tak czy inaczej, warto przyjrzeć się bliżej tej nowej funkcji.

W HTML5 mamy do wyboru kilka popularnych opcji wstawiania daty i czasu. Są nimi: date, datetime, datetime-local, month, week, i time.  Prześledzimy je w dokładny sposób. Gdzie należy podawać wspomniany typ? Dodajemy go jako jeden z atrybutów naszego pola <input>.

Input: date

Zrzut ekranu zrobiony jest z przeglądarki Opera, dlatego w innych programach może się on różnić wizualnie. Dla typu pola „date” wynik będzie właśnie taki jak poniżej:

Input: datetime

Tym razem wyświetli się nam pole daty – jak dotychczas – ale dodatkowo i okienko z możliwością wyboru godziny.

Input: datetime-local

Tutaj otrzymujemy możliwość wstawienia czasu lokalnego.

Input: month

Potrzebujemy zaznaczyć cały miesiąc? Z nowymi funkcjami to nic trudnego.

Input: week

Tak samo ma się sprawa wyboru tygodnia

Input: time

I na koniec wstawianie czasu w polu tekstowym.

W tej chwili naprawdę ubolewam nad tym, że funkcja Date Picker jest jeszcze w powijakach. Gdyby sprawnie działała na wiodących przeglądarkach, wypełnianie różnego rodzaju formularzy byłoby jeszcze prostsze. Oby weszła ona w życie jak najszybciej.

Zdjęcie: freedigitalphotos.net



2 odpowiedzi na “Date Picker z wykorzystaniem możliwości HTML5”

  1. Krystian pisze:

    „Dotychczas należało korzystać z pobocznych rozwiązań, takich jak Date Picker w jQuery, czy w (sic!) Java. ” Nie Java tylko JavaScript :) to jest różnica

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *