Wprowadzanie daty za pomocą datepicker jQuery

By | 31 października 2015

Parę miesięcy temu rozpocząłem przygodę z ASP.NET MVC, a zwykle jednymi z pierwszych tematów jakimi należy się zająć pisząc jakąkolwiek stronę są formularze. ASP.NET WebForms posiadał zestaw kontrolek do wprowadzania i walidacji wielu rodzajów danych, a MVC już nic takiego nie posiada. Oczywiście jest to zupełnie inne podejście do programowania i uważam, że w gruncie rzeczy lepsze. Tak więc posiadają całkowitą władzę nad tym jak będzie wyglądał wynikowy HTML, musiałem nauczyć się tworzyć dobrze pola formularzy. Pisząc „dobrze” mam na myśli, walidacje i wyświetlanie pomocniczych elementów, takich jak, np. datepicker.

Postanowiłem, że użyje tej kontrolki z jQuery, ponieważ ta biblioteka jest już od wielu lat używana przez wielu programistów i posiada wspaniałe wsparcie dokumentacji, oraz użytkowników na wszelakich forach. Ogólnie podziwiam bardzo dobrze zrobioną dokumentacje jQuery i Androida, ponieważ to przemawia bezpośrednio na popularność ich rozwiązań. Ja z pewnością będę z nich korzystał 🙂

datepicker jquery

to jest obrazek 🙂

No to zaczynamy

Należy umieścić na serwerze paczkę pobraną z tego adresu:

http://jqueryui.com/download/

Następnie w sekcji head na stronie należy umieścić takie odwołania:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

Po wykonaniu powyższego, możemy dodawać pole w formularzu:

<input type="text" name="date" id="datepick">

lub ASP.NETowe rozwiązanie:

@Html.TextBox("", "", new { @id = "datepick", type = "date" })

Aby pole tekstowe po zaznaczeniu wyświetlało kalendarz, musimy dodać kawałek kodu JS, które wywoła funkcję z jQuery dla pola o nazwie date:

<script>
$( "#datepick" ).datepicker();
</script>

Efekt powinien być taki jak na obrazku powyżej. Jeżeli chcemy uzyskać inne formatowanie, użyć innego stylu lub cokolwiek innego to warto zajrzeć na stronę dokumentacji tej biblioteki:

http://api.jqueryui.com/datepicker/

Dodaj komentarz

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