JavaScript

UI datepicker – graficzny interfejs wstawiania daty w polu formularza

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.

<script src="jquery-1.7.2.js"></script>
<script src="jquery-ui-1.8.21.custom.min"></script>

Poniżej wstawiamy taki skrypt:

<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>.

<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„.

Date: <input type="text" id="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.

komentarze 4

  • Awatar
    asdasd

    12 lutego 2013 13:32

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

    Odpowiedz
  • Awatar
    Leo Internauta

    16 października 2013 14:49

    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()

    Odpowiedz
  • Awatar
    Leo Internauta

    16 października 2013 14:52

    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

    Odpowiedz
  • Awatar
    Gość

    3 kwietnia 2014 12:42

    kaszanka…

    Odpowiedz

Zostaw odpowiedź