Rumah > hujung hadapan web > tutorial js > Cara menggunakan pemalam tarikh JQuery datepicker_jquery

Cara menggunakan pemalam tarikh JQuery datepicker_jquery

PHP中文网
Lepaskan: 2018-05-15 10:05:47
asal
3366 orang telah melayarinya

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>
Salin selepas log masuk
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" />
Salin selepas log masuk
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"/>
Salin selepas log masuk
5. Tulis kod js untuk mencapai kesan akhir.

$(document).ready(function() {   
   $(&#39;#selectDate&#39;).datepicker();   
 });
Salin selepas log masuk
Kesannya adalah seperti berikut:

Cara menggunakan pemalam tarikh JQuery datepicker_jquery

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>
Salin selepas log masuk
Kesannya adalah seperti berikut:

Cara menggunakan pemalam tarikh JQuery datepicker_jquery

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[&#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;]); 
});
Salin selepas log masuk
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>
Salin selepas log masuk
Kod halaman lengkap adalah seperti berikut:

 
 
  
  
 日期控件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"/> 
  
Salin selepas log masuk
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 (m.sbmmt.com )!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan