Comment utiliser le plug-in de date JQuery datepicker_jquery

JQuery est un très excellent framework de script. Ses contrôles riches sont très simples à utiliser et la configuration est très flexible. Vous trouverez ci-dessous un exemple d’utilisation du datapicker du plug-in de date.

1. Inutile de dire, téléchargez le fichier principal de jQuery. Datepicker est un plug-in léger. Vous n'avez besoin que de la version minimale de jQuery. Accédez ensuite au site officiel http://jqueryui. com/downloadTéléchargez le package compressé jquery-ui (vous pouvez choisir votre thème préféré), qui contient la prise en charge de datepicker. Bien sûr, vous pouvez également télécharger datepicker, notamment ui.core.js et ui.datepicker.js.

2. Référencez le fichier js téléchargé en HTML :

<!-- 引入 jQuery --> 
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script> 
<!--添加datepicker支持--> 
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script> 
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript">
</mce:script>

3. Introduisez le fichier de feuille de style par défaut en HTML, qui se trouve dans le package compressé de l'interface utilisateur. Si vous le téléchargez depuis le site officiel, vous pouvez télécharger ce fichier CSS sur la page d'accueil et vous pouvez également choisir CSS pour d'autres skins.

 
<!--引入样式css--> 
k type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" 
mce_href="css/jquery-ui-1.7.3.custom.css" />

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 type="text" id="selectDate" readonly="readonly"/>

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

$(document).ready(function() {   
   $('#selectDate').datepicker();   
 });

L'effet est le suivant :

Voici juste un contrôle de date de base. Nous devons également l'afficher en chinois et limiter la date. plage de sélection. Attendez la demande et modifiez légèrement le code js :

<mce:script type="text/javascript"><!-- 
  //等待dom元素加载完毕. 
    $(function(){ 
      $("#selectDate").datepicker({//添加日期选择功能 
      numberOfMonths:1,//显示几个月 
      showButtonPanel:true,//是否显示按钮面板 
      dateFormat: &#39;yy-mm-dd&#39;,//日期格式 
      clearText:"清除",//清除日期的按钮名称 
      closeText:"关闭",//关闭选择框的按钮名称 
      yearSuffix: &#39;年&#39;, //年的后缀 
      showMonthAfterYear:true,//是否把月放在年的后面 
      defaultDate:&#39;2011-03-10&#39;,//默认日期 
      minDate:&#39;2011-03-05&#39;,//最小日期 
      maxDate:&#39;2011-03-20&#39;,//最大日期 
      monthNames: [&#39;一月&#39;,&#39;二月&#39;,&#39;三月&#39;,&#39;四月&#39;,&#39;五月&#39;,&#39;六月&#39;,&#39;七月&#39;,&#39;八月&#39;,&#39;九月&#39;,&#39;十月&#39;,&#39;十一月&#39;,&#39;十二月&#39;], 
      dayNames: [&#39;星期日&#39;,&#39;星期一&#39;,&#39;星期二&#39;,&#39;星期三&#39;,&#39;星期四&#39;,&#39;星期五&#39;,&#39;星期六&#39;], 
      dayNamesShort: [&#39;周日&#39;,&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;], 
      dayNamesMin: [&#39;日&#39;,&#39;一&#39;,&#39;二&#39;,&#39;三&#39;,&#39;四&#39;,&#39;五&#39;,&#39;六&#39;], 
      onSelect: function(selectedDate) {//选择日期后执行的操作 
        alert(selectedDate); 
      } 
      }); 
    }); 
    
// --></mce:script>

L'effet est le suivant :

Cela répond essentiellement à nos besoins. Le contrôle datepicker est en anglais par défaut. Vous pouvez spécifier les valeurs d'affichage chinoises du mois et du jour via les attributsmonthNames et dayNames lors de la construction du datepicker. Cependant, il est trop difficile de configurer ces attributs à chaque utilisation. Vous pouvez ajouter un fichier js pour configurer toutes les valeurs chinoises. Mettez-le à l'intérieur et citez-le directement à chaque fois. Ici, il est placé dans jquery.ui.datepicker-zh-CN.js. >

jQuery(function($){ 
  $.datepicker.regional['zh-CN'] = { 
    closeText: '关闭', 
    prevText: '', 
    currentText: '今天', 
    monthNames: ['一月','二月','三月','四月','五月','六月', 
    '七月','八月','九月','十月','十一月','十二月'], 
    monthNamesShort: ['一','二','三','四','五','六', 
    '七','八','九','十','十一','十二'], 
    dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
    dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], 
    dayNamesMin: ['日','一','二','三','四','五','六'], 
    weekHeader: '周', 
    dateFormat: 'yy-mm-dd', 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: '年'}; 
  $.datepicker.setDefaults($.datepicker.regional['zh-CN']); 
});

6. Introduisez le plug-in chinois dans la page

<!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script>

Le code complet de la page est le suivant :

 
 
  
  
  
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" 
  type="text/javascript"></mce:script> 
  
   
  
  
 <input type="text" id="selectDate" readonly="readonly"/> 
  

Remarque : Depuis ui.core .js et ui.datepicker.js sur la page d'accueil de jquery datepicker ne sont pas les dernières versions, si vous téléchargez une nouvelle version de jquery -Le fichier css dans ui-1.8.13 empêchera l'affichage du contrôle de date, donc l'interface utilisateur de 1.7.3 est utilisée ici. Le moyen le plus simple consiste à utiliser jquery-ui pour compresser js.

Ce qui précède représente l'intégralité du contenu de cet article. Je vais vous présenter beaucoup de choses sur le sélecteur de date du plug-in de date JQuery. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!