UI datepicker – graficzny interfejs wstawiania daty w polu formularza


22 czerwca 2012 / Michał Kortas


W trakcie przygotowywania prostego systemu zarządzania treścią natrafiłem na problem ujednolicenia formatu daty dodawanej do naszych wpisów w bazie danych. Oczywiście mógłbym wytłumaczyć klientowi, że musi wstawiać ją w odpowiednie pole formularza, w stricto określonej formie (np. DD-MM-RRR). Nie jest to jednak praktyczne wyjście, choćby z tego względu, że nikt nie lubi mieć czegoś z góry narzucane – obniża się przez to profesjonalizm podejścia do użytkownika, a dodatkowo łatwo o popełnienie błędu. Aby rozwiązać problem. rozpocząłem poszukiwania biblioteki jQuery, która pomoże mi w jego rozwiązaniu. Natknąłem się na jQuery UI.

Na stronie autorów odnaleźć można dużo ciekawych komponentów. W tym wypadku interesuje nas tylko i wyłącznie Datepicke – kalendarz wyświetlający się po kliknięciu w pole, które służy do wpisania daty. Na początek pobierzmy specjalnie przygotowaną przeze mnie bibliotekę jQuery UI – zawiera ona tylko komponent kalendarza. Swoją wersję możecie sporządzić na stronie http://jqueryui.com/download.

Z pobranej paczki wyodrębnijmy pliki z folderu JS i podepnijmy je w sekcji <head> naszej witryny.

Poniżej wstawiamy taki skrypt:

Następnie wyodrębniamy z paczki katalog CSS wraz z zawartością i przypinamy go do witryny, w sekcji <head>.

Teraz, dla pola INPUT w formularzu, dopisujemy ID o nazwie „datepicker„.

Oczywiście możecie pobrać pliki źródłowe i zobaczyć demo online.

Zobacz DEMO | Pobierz pliki źródłowe

Efekt końcowy jest bardzo ciekawy i mam nadzieję, że przyda się Wam jeszcze nie raz.



4 odpowiedzi na “UI datepicker – graficzny interfejs wstawiania daty w polu formularza”

  1. asdasd pisze:

    A jak zmienić, żeby najpierw był dzień a później miesiąc??

  2. Leo Internauta pisze:

    jeśli nie podoba wam się format daty, w której najpierw jest domyślnie miesiąc, to należy linijkę

    dateFormat: „mm/dd/yy”, // See format options on parseDate

    zmienić na:

    dateFormat: „dd/mm/yy”, // See format options on parseDate

    w pliku z fukcją

    function Datepicker()

  3. Leo Internauta pisze:

    za to mam do was pytanie:
    jak wywołać dowolną funkcję js automatycznie po wyjściu z kalendarza czyli po kliknięciu w tabelce na datę?
    będę wdzięczny jeśli ktoś mi pomoże

  4. Gość pisze:

    kaszanka…

Dodaj komentarz

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