Maybaygiare.org

Blog Network

dodawanie datepicker do pola input za pomocą jQuery UI

datepickers pomagają użytkownikom wybrać datę za pomocą kalendarza. Pozwala to uniknąć błędów prawie zawsze spowodowanych złym wprowadzeniem daty, takich jak złe formatowanie. Za pomocą wtyczki jQuery możesz łatwo dodać datepicker do pola input. Istnieje wiele wtyczek datepicker, ale jQuery UI Datepicker jest jednym z najlepszych, ponieważ ma wiele opcji dostosowywania.

w tym samouczku pokażemy, jak dodać datepicker do pola input za pomocą jQuery. Za pomocą tego datepicker za każdym razem, gdy klikane jest określone pole input, otwiera się kalendarz. Użytkownik może wybrać z tego kalendarza datę (dzień, miesiąc i rok).

jQuery UI

przede wszystkim musimy dołączyć bibliotekę jQuery UI, aby korzystać z jej funkcji.

podstawowe funkcje Datepicker

w tym przykładzie pokażę Ci, jak dodać datepicker do pola input.

Javascript

musimy podać ID pola input jako selektor datepicker.

$(function(){ $("#datepicker").datepicker();});

HTML

w przypadku, gdy fokus znajduje się w polu input, otworzy się interaktywny kalendarz.

<p>Date: <input type="text"></p>

funkcjonalność dodatkowe Datepicker

poniżej przyjrzymy się, jak zrobić korzystanie z bardziej zaawansowanego Datepicker za pomocą kilku opcji, które oferuje nam.

Zmień format daty

domyślnie wtyczka używa formatu MM / DD / RRRR. Dzięki opcji dateFormat możemy zmienić format daty zgodnie z naszymi potrzebami.

$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});

Wybierz miesiąc i rok

domyślnie zmieniamy miesiąc i rok za pomocą strzałek w lewo i w prawo. Dzięki opcjom changeMonth i changeYear możemy wyświetlić menu, za pomocą którego możemy wybrać miesiąc i rok.

$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});

Ogranicz zakres dat

za pomocą Datepicker możesz wybrać w dowolnym momencie, ale jeśli chcesz to ograniczyć,możesz użyć opcji minDate i maxDate.

$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});

Datepicker Z up

w poniższym przykładzie pokażę Ci, jak wdrożyć datepicker w którym użytkownik będzie musiał wprowadzić daty i up-to-date. Okruchy tego skryptu jest to, że Data przed, nigdy nie może być przed datą od.

kod HTML

użytkownik może wybrać dowolną datę w polu Od, ale może wybrać tylko jedną, równą lub większą niż poprzednia wartość w polu przed.

<p>Date: <input type="text"> TO <input type="text"></p>

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.