jQuery插件的应用之 --- 日历


jQuery插件的应用之 --- 日历 

一   介绍 

（1）优点：在页面开发中，经常会遇到需要用户输入日期的操作，通常的做法是提供一个文本框，让用户输入，然后，再编写代码验证输入的数据，检测其是否是日期类型，这样比较麻烦，同时，用户输入日期的操作也不是很方便，影响用户体验。如果使用jQueryUI中的datepicker插件，这些问题就可以迎刃而解 

（2）导入的js和css文件 

  1.     jquery-1.7.1.min.js"  
  2.     jquery-ui-1.8.18.custom.min.js"  
  3. jquery.ui.core.js"  
  4. jquery.ui.datepicker.js"  
  5.     jquery.ui.widget.js"  
  6.     jquery.ui.datepicker-zh-CN.js"   把界面的改为中文的所需要导入的包  
  7. jquery-ui-1.8.18.custom.css"  

（3）功能实现 

在页面中，当单机文本框时，通过datepicker插件弹出一个日期选择窗口，该窗口可以使用下拉列表框的方式选择年份与月份，并显示与日期相对应的星期。 

二   代码详解 

1．首先来创建一个jsp页面 

  1.     <body>  
  2.         <div>  
  3.             <form action="">  
  4.                 <input type="text"  id="datepicker"/>  
  5.             </form>  
  6.         </div>  
  7.     </body>  

2. 然后用js代码来注册当点击id="datepicker"时触发的事件 

  1. <script type="text/javascript">  
  2.         $(document).ready(function(){  
  3.             $("#datepicker").datepicker();  
  4.         });  
  5.     </script>  
  6. 然后我们就可以向datepicker()中加入参数来修饰日期  
  7. （1）在日期的标题栏中显示下拉列表框  
  8. //在日期的标题栏中是否出现下拉选择框，选择日期中的月份，true代码有选择框   
  9.  changeMonth : true,  
  10. changeYear : true//在日期的标题栏中出现下拉列表框显示年   
  11. （2）关闭弹出的日期框  
  12. //在日期面板的下方出现2个按钮，一个是tody，一个是关闭，默认值是不显示的   
  13. showButtonPanel : true,  
  14. //关闭的效果文字必须结合showButtonPanel:true来使用   
  15. closeText : "关闭"  
  16.   
  17. （3）设定在文本框中的格式  
  18. dateFormat : "yy-mm-dd"  
  19. （4）设置日期的缺省值，在当前日期中 加或减一天  
  20. defaultDate : "-3"  
  21. （5）设置日期出现和消失的动画效果，比如有slide，toggle  
  22. showAnim : "slide"  
  23. （6）现在当年中的第一周，在左边显示  
  24. showWeek : true  
  25. （7）默认fisrtDay是当年的第一天  
  26. firstDay : 1  
  27. （8）表示下拉框中的年份的范围  
  28. yearRange : "2011:2012"  
  29. （9）如果是两个选框，填写的是从哪一天到哪一天的话，要获取点击的值并判断值  
  30. onSelect : function(selectedDate) {  
  31.             //获取当前 对象this.id=dp minDate  //开始日期的最小值    
  32.             //获取 option的值是minDat或者是maxDate  根据dom对象的id   
  33.             var option = this.id == "dep" ? "minDate" : "maxDate",  
  34.                 //获取当前日期的实例对象 ，每遍历一次就 获取一次   
  35.                 instance = $( this ).data( "datepicker" ),  
  36.                 //获取日期   instance.settings 获取日期的值    
  37.                 date = $.datepicker.parseDate(  
  38.                 instance.settings.dateFormat ||  
  39.                 $.datepicker._defaults.dateFormat,  
  40.                 selectedDate, instance.settings );  
  41.                 alert(instance.settings);  
  42.                 //设置日期   
  43.                 dates.not( this ).datepicker( "option", option, date );  
  44.             },  
  45. （10）在应用中还可能会用到点击图片或按钮弹出选择日期的对话框，会用到几下几个属性  
  46. //点击按钮时出发的事件    
  47.         showOn:"button",  
  48.         //向按钮上添加文本    
  49.         buttonText:"选择日期",  
  50.         //向按钮上添加图片    
  51.         buttonImage:" images/calendar.gif",  
  52.         //设置只显示图片  ，没有按钮    
  53.         buttonImageOnly:true,  
  54. （11）还有就是补全所有的日期，但是是不可选的   
  55. //补全所有的    
  56.     showOtherMonths:true,  
  57.     //在当前月中，其他月的日期不可以选择  ，，默认为false    
  58.     selectOtherMonths:false  
  59. （12）把显示的日期换成中文的格式，要导入包jquery.ui.datepicker-zh-CN.js，也可以加入$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);来声明  
  60.   
  61. 整体的代码为：  
  62. <script type="text/javascript">  
  63. //当页面 加载完毕的时候触发的匿名函数   
  64. $(document).ready(function() {    
  65.       $.datepicker.setDefaults($.datepicker.regional["zh-CN"]);  
  66.     //当点击的时候触发事件，点击的时候直接显示    
  67.         //判断开始日期的最大值等于结束日期的最小指    
  68.         var dates = $("#dep,#end").datepicker(  
  69.                 {  
  70.                     changeMonth : true,//在日期的标题栏中是否出现下拉选择框，选择日期中的月份，true代码有选择框，fals代码没有选择框   
  71.                     changeYear : false,//在日期的标题栏中出现下拉列表框显示年    
  72.                     showButtonPanel : true, //在日期面板的下方出现2个按钮，一个是tody，一个是关闭，默认值是不显示的   
  73.                     closeText : "关闭", //关闭的效果文字必须结合showButtonPanel:true来使用   
  74.                     dateFormat : "yy-mm-dd", //设定在文本框中的格式    
  75.                     defaultDate : "-3", //缺省值，在当前日期中 加或减一天    
  76.                     showAnim : "slide", //设置动画效果    slide  toggle   
  77.                     showWeek : true, //显示当年中的第几 周,在最左边    
  78.                     firstDay : 1, //默认fisrtDay是当年的第一天   
  79.                     yearRange : "2011:2012", //表示下拉框中的年份的范围        
  80.   
  81.                     onSelect : function(selectedDate) {  
  82.                     //获取当前 对象this.id=dp minDate  //开始日期的最小值    
  83.                     //alert(this);   
  84.                         //获取 option的值是minDat或者是maxDate  根据dom对象的id   
  85.                         var option = this.id == "dep" ? "minDate" : "maxDate",  
  86.                         //获取当前日期的实例对象 ，每遍历一次就 获取一次   
  87.                         instance = $( this ).data( "datepicker" ),  
  88.                         //获取日期   instance.settings 获取日期的值    
  89.                         date = $.datepicker.parseDate(  
  90.                         instance.settings.dateFormat ||  
  91.                         $.datepicker._defaults.dateFormat,  
  92.                         selectedDate, instance.settings );  
  93.                           
  94.                         alert(instance.settings);  
  95.                         //设置日期   
  96.                         dates.not( this ).datepicker( "option", option, date );  
  97.                     },  
  98.                     //提示信息   
  99.                     prevText:"上一月",  
  100.                     nextText:"下一月",  
  101.                     //显示几个选择的日期   
  102.                     numberOfMonths:1,  
  103.                     //点击按钮时出发的事件    
  104.                     showOn:"button",  
  105.                     //向按钮上添加文本    
  106.                     buttonText:"选择日期",  
  107.                     //向按钮上添加图片    
  108.                     buttonImage:" images/calendar.gif",  
  109.                     //设置只显示图片  ，没有按钮    
  110.                     buttonImageOnly:true,  
  111.                     //补全所有的    
  112.                     showOtherMonths:true,  
  113.                     //在当前月中，其他月的日期不可以选择  ，，默认为false    
  114.                     selectOtherMonths:false  
  115.                 });  
  116.     });  
  117. </script>  

效果为： 

相关内容