So verwenden Sie das JQuery-Datums-Plug-in datepicker_jquery

JQuery ist ein hervorragendes Skript-Framework. Seine umfangreichen Steuerelemente sind sehr einfach zu verwenden und die Konfiguration ist sehr flexibel. Unten finden Sie ein Beispiel für die Verwendung des Datums-Plug-Ins Datapicker.

1. Laden Sie die jQuery-Kerndatei herunter. Sie benötigen dann nur die Mindestversion von jQuery. com/downloadLaden Sie das komprimierte jquery-ui-Paket herunter (Sie können Ihr Lieblingsthema auswählen), das Datepicker unterstützt. Natürlich können Sie auch Datepicker herunterladen, einschließlich ui.core.js und ui.datepicker.js.

2. Referenzieren Sie die heruntergeladene js-Datei in 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. Führen Sie die Standard-Stylesheet-Datei in HTML ein, die sich im UI-komprimierten Paket befindet. Wenn Sie es von der offiziellen Website herunterladen, können Sie diese CSS-Datei auf der Homepage herunterladen und auch CSS für andere Skins auswählen.

 
<!--引入样式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. Fügen Sie ein Textfeld in HTML ein. Stellen Sie es am besten auf schreibgeschützt ein und akzeptieren Sie keine manuellen Eingaben von Benutzern, um Formatierungsverwechslungen zu vermeiden.

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

5. Schreiben Sie js-Code, um den endgültigen Effekt zu erzielen.

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

Der Effekt ist wie folgt:

Hier ist nur eine grundlegende Datumssteuerung, wir müssen es auch auf Chinesisch anzeigen und das Datum begrenzen Auswahlbereich. Warten Sie auf die Nachfrage und ändern Sie den js-Code leicht:

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

Der Effekt ist wie folgt:

Dies entspricht im Wesentlichen unseren Anforderungen. Das Datepicker-Steuerelement ist standardmäßig in Englisch. Sie können die chinesischen Anzeigewerte für Monat und Tag beim Erstellen des Datepickers angeben. Es ist jedoch zu mühsam, diese Attribute bei jeder Verwendung zu konfigurieren Sie können eine js-Datei hinzufügen, um alle chinesischen Werte zu konfigurieren. Hier wird sie in jquery.ui.datepicker-zh-CN.js abgelegt >

6. Führen Sie das chinesische Plug-in in die Seite ein

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']); 
});

Der vollständige Seitencode lautet wie folgt:

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

Hinweis: Da ui.core .js und ui.datepicker.js auf der JQuery-Datepicker-Homepage sind nicht die neuesten Versionen. Wenn Sie eine neue Version von JQuery herunterladen, führt die CSS-Datei in UI-1.8.13 dazu, dass die Datumssteuerung nicht angezeigt werden kann Hier wird die Benutzeroberfläche von 1.7.3 verwendet. Der einfachere Weg besteht darin, js mit jquery-ui zu komprimieren.

 
 
  
  
  
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <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"/> 
  

Das Obige ist der gesamte Inhalt dieses Artikels. Ich werde Ihnen so viel über den Datepicker des JQuery-Datums-Plugins vorstellen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!