Explication détaillée du plug-in de calendrier jQuery datepicker utilisation_jquery

jQuery est une bibliothèque de développement de scripts JavaScript rare et excellente, et de nombreux plug-ins basés sur celle-ci sont également très standardisés et excellents. Il serait dommage de passer à côté de cette beauté, comme le plug-in datepicker.

Généralement, le frontal du système MIS, en particulier la page d'enregistrement des utilisateurs, aura une zone de saisie de date telle que "mois et année de naissance". Le moyen le plus simple est d'utiliser un pour ce faire. Les inconvénients sont nombreux : d'une part, la correspondance avec le type de champ de la base de données, d'autre part, la légalité de la date saisie comme "13ème mois" ou année bissextile, etc. Si on approfondit, il y en a beaucoup des lieux dignes de considération. L'approche actuellement populaire consiste à utiliser des menus déroulants, mais cette approche n'est pas satisfaisante en termes d'interactivité, de complexité et de portabilité, car au moins trois drop- des menus déroulants doivent être créés et un grand nombre de scripts doivent être écrits pour gérer la validité des dates.

Datepicker apporte un merveilleux printemps, voyons à quoi il ressemble lorsque vous utilisez le style par défaut :

Une expérience utilisateur entièrement similaire à celle d'une interface graphique, des effets d'affichage dynamiques éblouissants, un contrôle précis de la date et une configuration des paramètres très flexible, qui font du sélecteur de date le favori de nombreux développeurs, dont le célèbre Google, dans son projet Google Calendar. Ce script est utilisé dans . Si vous êtes intéressé, vous pouvez le consulter. Au fait, l'effet par défaut dans l'image ci-dessus peut être obtenu en écrivant une phrase en javascript. Et si vous êtes excité, suivez-moi :

1. Inutile de dire que vous devez télécharger le fichier principal de jQuery. Datepicker est un plug-in léger. Vous n'avez besoin que de la version min de jQuery. Téléchargez ensuite datepicker (y compris jQuery1.2.6_min). site officiel. : http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Citez les deux js téléchargés en HTML :

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3. Introduisez le fichier de feuille de style par défaut dans HTML. Ce fichier est également dans le package compressé en ce moment. Si vous le téléchargez depuis le site officiel, vous pouvez également choisir CSS pour. autres skins :

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

4. Insérez un champ de texte en HTML. Il est préférable de le définir en lecture seule et de ne pas accepter la saisie manuelle des utilisateurs pour éviter toute confusion de formatage.

<input id="dateinput" type="text" readonly="readonly"/>

5. Écrivez du code js pour obtenir l'effet final.

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

Cela complète essentiellement un champ de texte de saisie de date, mais il est en anglais. Selon différents systèmes MIS, certains groupes cibles sont des utilisateurs plus âgés. Il est recommandé de changer l'interface en chinois. Vous pouvez le faire avec quelques modifications. La fonction tout à l'heure, comme ceci :

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK, vous avez terminé. Le code de la page que j'ai écrit selon mes propres exigences est le suivant. C'est à titre de référence uniquement.

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>




<input id="dateinput" type="text" readonly="readonly"/>

Ce qui précède est une introduction détaillée à l'utilisation du sélecteur de date du plug-in de calendrier jQuery. J'espère qu'il sera utile à l'apprentissage de chacun.