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>