Penjelasan terperinci tentang pemalam kalendar jQuery datepicker usage_jquery

jQuery ialah pustaka pembangunan skrip JavaScript yang jarang ditemui dan sangat baik, dan banyak pemalam berdasarkannya juga sangat piawai dan sangat baik untuk terlepas keindahan ini, seperti pemalam datepicker.

Secara amnya, bahagian hadapan sistem MIS, terutamanya halaman pendaftaran pengguna, akan mempunyai kotak input tarikh seperti "bulan dan tahun lahir Cara paling mudah ialah menggunakan teg untuk melakukan ini Terdapat banyak kelemahan: pertama, pemadanan dengan jenis medan pangkalan data, kedua, kesahihan tarikh input seperti "bulan ke-13" atau tahun lompat, dll. Jika kita pergi lebih dalam, terdapat banyak tempat yang patut dipertimbangkan. Pendekatan yang popular pada masa ini ialah menggunakan menu lungsur turun, tetapi pendekatan ini tidak memuaskan dari segi interaktiviti, kerumitan dan mudah alih, kerana Sekurang-kurangnya tiga drop terpaut- menu bawah perlu dibina, dan sejumlah besar skrip perlu ditulis untuk mengendalikan kesahihan tarikh.

Penetik tarikh membawakan musim bunga yang indah, mari kita lihat penampilannya apabila menggunakan gaya lalai:

Pengalaman pengguna sepenuhnya seperti GUI, kesan paparan dinamik yang mempesonakan, kawalan tarikh yang tepat dan konfigurasi parameter yang sangat fleksibel, semuanya menjadikan datepicker digemari oleh ramai pembangun, termasuk Google yang terkenal, dalam projek Kalendar Google Skrip ini digunakan dalam . Jika anda berminat, anda boleh menyemaknya. By the way, kesan lalai dalam gambar di atas boleh dicapai dengan menulis ayat dalam javascript Bagaimana pula jika anda teruja, ikuti saya:

1. Tidak perlu dikatakan, muat turun fail teras jQuery ialah pemalam yang ringan Anda hanya memerlukan versi min laman web rasmi: http://marcgrabanski.com/pages/code/jquery-ui-datepicker.

2. Petik dua js yang dimuat turun dalam HTML:

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>

3. Perkenalkan fail helaian gaya lalai ke dalam HTML Fail ini juga terdapat dalam pakej termampat tadi kulit lain:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />

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

5. Tulis kod js untuk mencapai kesan akhir.

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker(); 
 }); 
</script>

Ini pada asasnya melengkapkan medan teks input tarikh, tetapi ia dalam bahasa Inggeris Menurut sistem MIS yang berbeza, sesetengah kumpulan sasaran adalah pengguna yang lebih lama. Anda boleh melakukan ini dengan beberapa perubahan. Fungsi tadi, seperti ini:

<script language="javascript">
$(document).ready(function() { 
 $('#dateinput').datepicker({ 
  dateFormat: 'yy-mm-dd', //日期格式，自己设置
  buttonImage: 'calendar.gif', //按钮的图片路径，自己设置
  buttonImageOnly: true, //Show an image trigger without any button.
  showOn: 'both',//触发条件，both表示点击文本域和图片按钮都生效
 yearRange: '1990:2008',//年份范围
 clearText:'清除',//下面的就不用详细写注释了吧，呵呵，都是些文本设置
 closeText:'关闭',
 prevText:'前一月',
 nextText:'后一月',
 currentText:' ',
 monthNames:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
 }); 
 }); 
</script>

OK, anda sudah selesai Kod halaman yang saya tulis mengikut keperluan saya sendiri adalah untuk rujukan sahaja:

<link rel="stylesheet" href="js/ui.datepicker.css" type="text/css" media="screen" title="core css file" charset="utf-8" />
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script language="javascript" src="js/ui.datepicker.js"></script>



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

Di atas ialah pengenalan terperinci kepada penggunaan pemalam pemalam kalendar jQuery saya harap ia akan membantu pembelajaran semua orang.