Comment utiliser le contrôle du temps jquery UI Datepicker (version améliorée)_jquery

Jetons d'abord un coup d'œil à la table des propriétés du plug-in Datepicker :

Le premier exemple d'utilisation du plug-in de calendrier
Importez d’abord les fichiers de bibliothèque de classes requis :

<</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">

Écrivez d'abord le code de la page :

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

Ensuite, utilisez le code js pour appeler le plug-in

Capture d'écran de l'effet :

Ce qui suit est une vérification de certains attributs communs à travers des exemples :
1. altField : Utilisez un champ de sortie alternatif, c'est-à-dire affichez la date sélectionnée dans un autre format vers un autre contrôle, et la valeur est le sélecteur, c'est-à-dire le contrôle à afficher
altFormat : format de sortie altField
Exemple de vérification :
Code de la page :

<</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>

Code Js :

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

Capture d'écran de l'effet :

2. showAnim : Définissez le nom de l'animation affiché ou masqué dans le panneau de date
Écrire du code js :

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

3. showButtonPanel : S'il faut afficher le panneau de boutons
Code Js :
[javascript] voir plaincopyprint ?
$( "#datepicker" ).datepicker({
showButtonPanel : true
});

Comme le montre l'image, il y a deux boutons sous le panneau : cliquer sur "Aujourd'hui" passera à la date d'aujourd'hui et cliquer sur "Fermer" fermera le panneau.

4. dateFormat : Spécifiez le format d'affichage de la date
Code Js :

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

Capture d'écran de l'effet :

Comme vous pouvez le voir sur l'image, le format de date dans la zone de texte a été modifié de « aa-mm-jj » à « par/mm/jj ». Bien entendu, il existe d’autres formats qui peuvent être définis selon vos propres préférences.
5. changeMonth : Utiliser ou non la liste déroulante pour sélectionner le mois
changeYear : s'il faut utiliser la liste déroulante pour sélectionner l'année
Ajoutez cet attribut dans le code js : changeMonth:true ou changeYear:true
Le mois ou l'année dans la barre de titre apparaîtra sous la forme d'un menu déroulant :

6. yearRange : Définissez la plage d'années affichée dans la zone de liste déroulante, qui peut être relative à cette année (-nn : nn) ou relative à l'année sélectionnée (c-nn : c nn) ou année absolue (nnnn:nnnn)
Ajouter des attributs dans le code js :

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

Capture d'écran de l'effet :

Comme vous pouvez le voir sur la photo, la position de l'année se présente sous la forme d'un menu déroulant, et seules les options pour 2011 et 2012 apparaîtront dans le menu déroulant.
Remarque : l'attribut yearRange n'est utilisé que lorsque changeYear est vrai.

7. numberOfMonths : Définissez le nombre de mois à afficher à la fois. Peut être un tableau contenant deux nombres, indiquant le nombre de lignes et de colonnes affichées
Code Js :

$( "#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时间控件终结篇学习。