這篇文章主要介紹了Jquery日期選擇datepicker插件用法,實例分析了datepicker插件的相關使用技巧,需要的朋友可以參考下

本文實例講述了Jquery日期選擇datepicker插件用法。分享給大家供大家參考。具體如下：

1、首先將Jquery中的datepicker插件中的相關屬性值改成中文的：

1. $.datepicker.regional['zh-CN'] = {  
2. clearText: '清除',  
3. clearStatus: '清除已選日期',  
4. closeText: '關閉',  
5. closeStatus: '不改變當前選擇',  
6. prevText: '<上月',  
7. prevStatus: '顯示上月',  
8. prevBigText: '<<',  
9. prevBigStatus: '顯示上一年',  
10. nextText: '下月>',  
11. nextStatus: '顯示下月',  
12. nextBigText: '>>',  
13. nextBigStatus: '顯示下一年',  
14. currentText: '今天',  
15. currentStatus: '顯示本月',  
16. monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],  
17. monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],  
18. monthStatus: '選擇月份',  
19. yearStatus: '選擇年份',  
20. weekHeader: '周',  
21. weekStatus: '年內周次',  
22. dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
23. dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
24. dayNamesMin: ['日','一','二','三','四','五','六'],  
25. dayStatus: '設置 DD 為一周起始',  
26. dateStatus: '選擇 m月 d日, DD',  
27. dateFormat: 'yy-mm-dd',  
28. firstDay: 1,  
29. initStatus: '請選擇日期',  
30. isRTL: false}; 
31. $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  

2、html頁面中有兩個日期輸入框，分別為起始日期和結束日期：

1. <label for="start-datepicker">起始日期:</label> <input type="text" class="datepicker test-image-datepicker" id="start-datepicker" size="15" /> 
2. <label for="end-datepicker">結束日期:</label> <input type="text" class="datepicker test-image-datepicker" id="end-datepicker" size="15" /> 

3、調用修改后的datepicker插件：

1. var $start_date_value = "2012年1月1日"; // TODO 改成可以配置的 
2. var $end_date_value = new Date(); 
3. // When document has loaded, initialize pagination and form  
4. $(document).ready(function(){  
5. $(".imagezz").click($test_image_check_box_click); 
6. $( ".test-image-datepicker" ).datepicker({ 
7. changeMonth: true, 
8. changeYear: true, 
9. showOn: "both", 
10. buttonImage: "images/calendar.gif", 
11. buttonImageOnly: true, 
12. showButtonPanel: true, 
13. onSelect: function(dateText, inst){ 
14. if ($(this).attr("id") == "start-datepicker") { 
15. $start_date_value = dateText; 
16. } 
17. if ($(this).attr("id") == "end-datepicker") { 
18. $end_date_value = dateText; 
19. } 
20. //下面可以寫一些根據日期變化引起頁面相關部分修改的函數 
21. //...... 
22. } 
23. }); 
24. $(".test-image-datepicker").datepicker("option", "dateFormat", "yy年mm月dd日"); 
25. $('.test-image-datepicker').attr("readonly","readonly"); 
26. $("#start-datepicker").datepicker("setDate",$start_date_value); 
27. $("#end-datepicker").datepicker("setDate",$end_date_value); 

datepicker其余選項及方法詳見：http://api.jqueryui.com/datepicker/

希望本文所述對大家的jQuery程序設計有所幫助。