Heim > Web-Frontend > js-Tutorial > So verwenden Sie das JQuery-Datums-Plug-in datepicker_jquery

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

PHP中文网
Freigeben: 2018-05-15 10:05:47
Original
3363 Leute haben es durchsucht

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>
Nach dem Login kopieren
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" />
Nach dem Login kopieren
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"/>
Nach dem Login kopieren
5. Schreiben Sie js-Code, um den endgültigen Effekt zu erzielen.

$(document).ready(function() {   
   $(&#39;#selectDate&#39;).datepicker();   
 });
Nach dem Login kopieren
Der Effekt ist wie folgt:

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

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>
Nach dem Login kopieren
Der Effekt ist wie folgt:

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

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[&#39;zh-CN&#39;] = { 
    closeText: &#39;关闭&#39;, 
    prevText: &#39;&#39;, 
    currentText: &#39;今天&#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;], 
    monthNamesShort: [&#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;], 
    weekHeader: &#39;周&#39;, 
    dateFormat: &#39;yy-mm-dd&#39;, 
    firstDay: 1, 
    isRTL: false, 
    showMonthAfterYear: true, 
    yearSuffix: &#39;年&#39;}; 
  $.datepicker.setDefaults($.datepicker.regional[&#39;zh-CN&#39;]); 
});
Nach dem Login kopieren

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>
Nach dem Login kopieren

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.
 
 
  
  
 日期控件datepicker 
    
  
   
  
  
   
  
   
  
  
  
   
  
  <!-- 添加中文支持-->
  <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"/> 
  
Nach dem Login kopieren

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 (m.sbmmt.com). )!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage