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.
1 2 | <script src="jquery-1.7.2.js"></script> <script src="jquery-ui-1.8.21.custom.min"></script> |
Poniżej wstawiamy taki skrypt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> $(function(){ $('#datepicker').datepicker({ inline: true }); $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); </script> |
Następnie wyodrębniamy z paczki katalog CSS wraz z zawartością i przypinamy go do witryny, w sekcji <head>.
1 | <link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> |
Teraz, dla pola INPUT w formularzu, dopisujemy ID o nazwie „datepicker„.
1 | Date: <input type="text" id="datepicker"> |
Oczywiście możecie pobrać pliki źródłowe i zobaczyć demo online.
Efekt końcowy jest bardzo ciekawy i mam nadzieję, że przyda się Wam jeszcze nie raz.
A jak zmienić, żeby najpierw był dzień a później miesiąc??
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()
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
kaszanka…