So verwenden Sie die Zeitsteuerung von jquery UI Datepicker (erweiterte Version)_jquery

Werfen wir zunächst einen Blick auf die Eigenschaftentabelle des Datepicker-Plug-Ins:

Das erste Anwendungsbeispiel des Kalender-Plug-ins
Importieren Sie zunächst die erforderlichen Klassenbibliotheksdateien:

<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript"src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script>
<</SPAN>linkrel="stylesheet"type="text/css"href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

Schreiben Sie zuerst den Seitencode:

<</SPAN>div class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>div>

Dann verwenden Sie js-Code, um das Plug-in aufzurufen

Screenshot des Effekts:

Im Folgenden finden Sie eine Überprüfung einiger allgemeiner Attribute anhand von Beispielen:
1. altField: Verwenden Sie ein alternatives Ausgabefeld, dh geben Sie das ausgewählte Datum in einem anderen Format an ein anderes Steuerelement aus, und der Wert ist der Selektor, dh das auszugebende Steuerelement
altFormat: Format der altField-Ausgabe
Beispielverifizierung:
Seitencode:

<</SPAN>div class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" size="30"/></</SPAN>p>
</</SPAN>div>

Js-Code:

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

Screenshot des Effekts:

2. showAnim: Legen Sie den Namen der Animation fest, der im Datumsbereich angezeigt oder ausgeblendet wird
JS-Code schreiben:

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

3. showButtonPanel: Ob das Schaltflächenfeld angezeigt werden soll
Js-Code:
[javascript] plaincopyprint anzeigen?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});

Wie im Bild gezeigt, befinden sich unterhalb des Panels zwei Schaltflächen: Durch Klicken auf „Heute“ springen Sie zum heutigen Datum, und durch Klicken auf „Schließen“ wird das Panel geschlossen.

4. dateFormat: Geben Sie das Format für die Anzeige des Datums an
Js-Code:

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

Screenshot des Effekts:

Wie Sie auf dem Bild sehen können, wurde das Datumsformat im Textfeld von „jj-mm-tt“ in „bis/mm/tt“ geändert. Natürlich gibt es auch andere Formate, die nach den eigenen Vorlieben eingestellt werden können.
5. changeMonth: Ob die Dropdown-Liste zur Auswahl des Monats verwendet werden soll
changeYear: ob die Dropdown-Liste zur Auswahl des Jahres
verwendet werden soll Fügen Sie dieses Attribut im JS-Code hinzu: changeMonth:true oder changeYear:true
Der Monat oder das Jahr in der Titelleiste wird in Form eines Dropdown-Menüs angezeigt:

6. yearRange: Legen Sie den im Dropdown-Listenfeld angezeigten Jahresbereich fest, der relativ zu diesem Jahr (-nn: nn) oder relativ zum ausgewählten Jahr (c-nn:) sein kann. c nn) oder absolutes Jahr (nnnn:nnnn)
Fügen Sie Attribute im JS-Code hinzu:

$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});

Screenshot des Effekts:

Wie Sie auf dem Bild sehen können, erfolgt die Position des Jahres in Form eines Dropdown-Menüs und nur die Optionen für 2011 und 2012 werden im Dropdown-Menü angezeigt.
Hinweis: Das Attribut „yearRange“ wird nur verwendet, wenn „changeYear“ den Wert „true“ hat.

7. numberOfMonths: Legen Sie fest, wie viele Monate gleichzeitig angezeigt werden sollen. Kann ein Array sein, das zwei Zahlen enthält und die Anzahl der angezeigten Zeilen und Spalten angibt
Js-Code:

$( "#datepicker" ).datepicker({
numberOfMonths: 3
});

上面指定numberOfMonths为3，那么弹出的日历面板就会显示当前以及以后两个月，如图：

8、showOn：设置触发选择器的事件名称
buttonText：指定触发按钮上显示的文本，showOn属性应设置为button或both
buttonImage：指定弹出按钮图像的URL，若设置则buttonText将成为alt值
buttonImageOnly：是否将图像放在控件后面，作为触发器，如果设置为true那么按钮将只剩下图片作为按钮，是页面更加美观
这里我编写三个文本框进行以上属性的对比：
1) Js代码：

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日历按钮"
});

效果截图：

2）将按钮设置为图片：
Js代码：

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

通过以上对比，可以理解buttonImageOnly属性的作用。
9、minDate：可以选择的最小日期，null表示无限制
maxDate：可以选择的最大日期。null表示无限制
两者都是根据以当天日期为基础的。
Js代码：

$(function() {
$( "#datepicker" ).datepicker({
//表示以当天为准，只有在20天之前和10天之后的日期之间的时间可以选择
minDate: -20,
maxDate: "+10D"
});
});

如下图在7号之前都不可选择（当前日期为27）：

以上就是对jquery UI Datepicker时间控件的使用方法深入学习，为之后的学习打下了基础，希望大家继续关注jquery UI Datepicker时间控件终结篇学习。