Przykładem jQuery UI - data kompletacji (Datepicker)
W oknie pop-up lub inline kalendarzu wybrać datę.
Aby uzyskać więcej informacji na temat składników datepicker, zobacz dokumentację API element Date Picker (datepicker widżet) .
Domyślną funkcją
Data kompletacji (Datepicker) jest zobowiązany do standardowego formularza na polu wejściowym. Przenosi fokus na wejściu (lub użyć klawisza Tab do kliknięcia), aby otworzyć interaktywną kalendarz na małą nakładce. Wybierz datę, kliknij w dowolnym miejscu strony (pole wejściowe traci ostrość) lub kliknij klawisz Esc, aby zamknąć. Jeśli wybierzesz datę, informacja zwrotna jest wyświetlana jako wartość wkładu.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Domyślna funkcja </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
ożywienie
Używaj różnych animacji podczas otwierania lub zamykania datepicker. Wybierz film z listy rozwijanej, a następnie kliknij pole, aby zobaczyć jego działanie. Można użyć dowolnego jednego z trzech standardowych animacji, efektów specjalnych, lub użyć dowolnego interfejsu użytkownika.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Anime </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#anim") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opcja", "showAnim", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Animacja: Największa
<Select id = "anim">
<Wartość Option = "show"> Show (domyślnie) </ option>
<Wartość Option = "slideDown"> slajd </ option>
<Wartość Option = "fadeIn"> Fade </ option>
<Value option = "w ciemno"> (Efekty rolety UI) Blind </ option>
<Option value = "bounce"> odrzuceń (UI efekty odbicia) </ option>
<Wartość Option = "klip"> Klip (efekty edycji UI) </ option>
<Wartość Option = "drop"> drop (UI wylądował efekty) </ option>
<Wartość Option = "spasować"> Fold (UI złożone efekty) </ option>
<Wartość Option = "slide"> Przesuń (UI przesuwnych efekty) </ option>
<Wartość Option = ""> Nie </ option>
</ Select>
</ P>
</ Body>
</ Html>
Inne miesięcy od daty
datepicker może pokazać dodatkowego terminu miesięcznego, daty te mogą być ustawione na opcjonalne.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - w pozostałych miesiącach od daty </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOtherMonths: prawda,
selectOtherMonths: prawda
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
pasek przycisków wyświetlanych
Przez logicznych showButtonPanel dotyczących selekcji dzisiejszym datownikiem przycisk "Dzisiaj", aby wyłączyć kalendarz wyświetli "Gotowe" opcji przycisku. Domyślnie, gdy wyświetlacz pasek przycisków pozwoli na każdy przycisk, ale przycisk można wyłączyć za pomocą innych opcji. Tekst na przycisku można dostosować.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Wyświetlacz Przycisk bar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
wyświetlacz inline
datepicker jest zagnieżdżony w wyświetlanej strony, a nie w warstwie wierzchniej. Wystarczy zadzwonić pod .datepicker div () może być, zamiast dzwonić na wejściu.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI wyboru daty (Datepicker) - wbudowany wyświetlacz </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
});
</ Script>
</ Head>
<Body>
Data: <div id = "datepicker"> </ div>
</ Body>
</ Html>
Wyświetlanie menu miesiąc i rok
Rozwijane pole wyświetla miesiąc i rok, a nie statycznym wyświetlaczem tytułu miesiąc / rok, to łatwo obejmują duży zakres czasu w nawigacji. Dodaj wartość logiczną changeMonth i changeYear opcję.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Wyświetlacz miesięcy & amp; Menu rok </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
changeMonth: prawda,
changeYear: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Wyświetlanie wielu miesięcy
Ustawianie numberOfMonths opcji jest liczbą całkowitą 2 lub liczbę całkowitą większą niż 2, które mają być wyświetlane na datepicker wielu miesięcy.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - wyświetlanie wielu miesięcy </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
NUMBEROFMONTHS: 3,
showButtonPanel: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Format daty
W różnych sposobów, aby wyświetlić informację daty. Wybierz format daty z listy rozwijanej, a następnie kliknij i wybierz datę w polu tekstowym, widok formatu daty wybranego wyświetlacza.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Format daty </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ();
$ ( "#format") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opcja", "dateformat", $ (this) .val ());
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker" size = "30"> </ p>
<P> Opcje formatowania: Największa
<Select id = "Format">
<Option value = "mm / dd / yy"> Default - dd / mm / rr </ option>
<Option value = "rr-mm-dd"> ISO 8601 - rr-mm-dd </ option>
<Wartość Option = "d M, Y"> Short - d M, Y </ option>
<Wartość Option = "d MM, y"> Medium - d MM, y </ option>
<Wartość Option = "DD, d MM, yy"> Pełna - DD, d MM, yy </ option>
<Wartość Option = "N'dobę N'D 'z N'MM' na rok N'YY"> z tekstem - "dzień" D "z" MM "w roku" yy </ option>
</ Select>
</ P>
</ Body>
</ Html>
ikona wyzwalania
Kliknij ikonę obok pola wejściowego, aby wyświetlić datepicker. Ustawianie datepicker otwiera (domyślne zachowanie) w ognisku, lub kliknij na ikonę, aby otworzyć lub otwórz / stawać się po kliknięciu na ikonę.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - wyzwolenie ikona </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showOn: przycisk "",
buttonImage: "images / calendar.gif"
buttonImageOnly: true
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
zlokalizowane kalendarza
Lokalizacja datepicker kalendarz język i format (domyślnym jest angielski / format Zachodnia). datepicker zawiera wbudowane wsparcie dla prawej do lewej językach czytania, takich jak arabski i hebrajski.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - zlokalizowane kalendarz </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"> </ script>
<Script src = "http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ($ .datepicker.regional [ "Pt"]);
$ ( "#locale") .change (Function () {
$ ( "#datepicker") .datepicker ( "Opcja"
$ .datepicker.regional [$ (This) .val ()]);
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp;
<Select id = "locale">
<Wartość Option = "ar"> arabski (& # 8235; (& # 1575; & # 1604; & # 1593; & # 1585; & # 1576; & # 1610; & # 1577; </ option>
<Wartość Option = "zh-TW"> chiński tradycyjny (& # 32321; & # 39636; & # 20013; & # 25991;) </ option>
<Wartość Option = ""> angielski </ option>
<Option value = "fr" selected = "wybrany"> francuski (Fran & ccedil; AIS) </ option>
<Wartość Option = "on"> hebrajski (& # 8235; (& # 1506; & # 1489; & # 1512; & # 1497; & # 1514; </ option>
</ Select> </ p>
</ Body>
</ Html>
Wypełnianie kolejne pole wprowadzania
Korzystanie altField i altFormat opcje ilekroć wybrać datę, data zostanie wypełniona określonym formacie w innym polu tekstowym. Gdy ta funkcja w terminie sprawie dalszej obróbki komputerowej w obsłudze, użytkownik jest przedstawiona z datą przyjazny dla użytkownika.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - wypełnić kolejne pola wprowadzania </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
altField: "#alternate"
altFormat: "DD, d MM YY"
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> & nbsp; <input type = "text" id = "alternate" size = "30"> </ p>
</ Body>
</ Html>
Ograniczyć zakres dat
Przez minDate i maxDate opcja ogranicza selekcyjny zakres dat. Określ punkt początkowy i końcowy termin rzeczywistej daty (new Date (2009, 1 - 1, 26)), albo ciągiem dzisiejszej wartości offsetowej (-20) lub jako cykl i jednostek ( "+ 1M + 10D "). Jeśli ustawione na sznurku, użyj 'd' dni, za pomocą 'w' oznacza tygodnie, stosując "M" za miesiąc, korzystając z "y" jest rokiem.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - ograniczyć zakres dat </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({MinDate: -20, MaxDate: "+ 1M + 10D"});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>
Wybierz zakres dat
Wybierz zakres dat, aby szukać.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - Wybierz zakres dat </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#from") .datepicker ({
defaultDate: "+ 1W"
changeMonth: prawda,
NUMBEROFMONTHS: 3,
onClose: function (SelectedDate) {
$ ( "# Aby") .datepicker ( "Opcja", "minDate" SelectedDate);
}
});
$ ( "# Aby") .datepicker ({
defaultDate: "+ 1W"
changeMonth: prawda,
NUMBEROFMONTHS: 3,
onClose: function (SelectedDate) {
$ ( "#from") .datepicker ( "Opcja", "MaxDate" SelectedDate);
}
});
});
</ Script>
</ Head>
<Body>
<Label for = "z"> z </ label>
<Input type = "text" id = "z" name = "z">
<Label for = "na"> na </ label>
<Input type = "text" id = "na" name = "na">
</ Body>
</ Html>
Tydzień roku koncert
datepicker może wyświetlać pierwszych kilka tygodni w roku. Domyślna wartość jest obliczana zgodnie z normą ISO 8601 Definicja: tydzień rozpoczynający się w poniedziałek, w pierwszym tygodniu roku zawierający pierwszy czwartek. Oznacza to, że w ciągu jednego roku i może być jeszcze kilka dni w tygodniu.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI termin kompletacji (Datepicker) - wyświetla kilka pierwszych tygodni roku </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#datepicker") .datepicker ({
showWeek: prawda,
firstDay 1
});
});
</ Script>
</ Head>
<Body>
<P> Data: <input type = "text" id = "datepicker"> </ p>
</ Body>
</ Html>