Cara menggunakan pemalam tarikh JQuery datepicker_jquery

JQuery ialah rangka kerja skrip yang sangat baik Kawalannya yang kaya sangat mudah untuk digunakan dan konfigurasinya sangat fleksibel. Di bawah ialah contoh menggunakan pemetik data pemalam tarikh.

1. Tidak perlu dikatakan, muat turun fail teras jQuery ialah pemalam yang ringan Anda hanya memerlukan versi min jQuery. com/downloadMuat turun pakej termampat jquery-ui (anda boleh memilih tema kegemaran anda), yang mengandungi sokongan untuk datepicker Sudah tentu, anda juga boleh memuat turun datepicker, termasuk ui.core.js dan ui.datepicker.js.

2. Rujuk fail js yang dimuat turun dalam 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. Jika anda memuat turunnya dari tapak web rasmi, anda boleh memuat turun fail CSS ini di halaman utama, dan anda juga boleh memilih CSS untuk kulit lain.

 
<!--引入样式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 Sisipkan medan teks dalam HTML adalah lebih baik untuk menetapkannya kepada baca sahaja dan tidak menerima input manual daripada pengguna untuk mengelakkan kekeliruan pemformatan.

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

5. Tulis kod js untuk mencapai kesan akhir.

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

Kesannya adalah seperti berikut:

Ini hanyalah kawalan tarikh asas Kami juga perlu memaparkannya dalam bahasa Cina dan mengehadkan tarikhnya julat pemilihan. Tunggu permintaan dan ubah suai sedikit kod 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>

Kesannya adalah seperti berikut:

Ini pada asasnya memenuhi keperluan kita. Kawalan datepicker adalah dalam bahasa Inggeris secara lalai Anda boleh menentukan nilai paparan bahasa Cina bagi bulan dan hari melalui atribut monthNames dan dayNames semasa membina datepicker Walau bagaimanapun, adalah terlalu menyusahkan untuk mengkonfigurasi atribut ini setiap kali anda menggunakan ia. Anda boleh menambah fail js untuk mengkonfigurasi semua nilai bahasa Cina dan memetiknya terus setiap kali anda menggunakannya. Di sini ia diletakkan dalam 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 Perkenalkan pemalam bahasa Cina ke dalam halaman

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

Kod halaman lengkap adalah seperti berikut:

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

Nota: Sejak ui.core.js dan ui.datepicker.js pada halaman utama datepicker jquery bukanlah versi terkini, jika anda memuat turun versi baru jquery Fail css dalam -ui-1.8.13 akan menyebabkan kawalan tarikh tidak dapat dipaparkan, jadi UI 1.7.3 digunakan di sini. Cara yang lebih mudah ialah menggunakan jquery-ui untuk memampatkan js.

Di atas adalah keseluruhan kandungan artikel ini, saya akan memperkenalkan anda banyak tentang datepicker pemalam tarikh JQuery Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn )!