jQuery之日期选择器

1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择

一个日期的时候，将自动关闭该日历选择面板

      $(selector).datepicker([options]);

简单实例：

   

请输入一个日期：

效果图：

  

2：指定弹出日期选择器的图片按钮

    需要添加响应的资源文件：

         $(document).ready(function() {

                  $("#datepicker").datepicker({

                               showOn: "button",

                               buttonImage: "Images/calendar.gif",

                               buttonImageOnly: true

                 });

          });  

      

请选择一个日期：

效果图：

   

3：显示带年、月份下拉列表和按钮面板的日期选择器

   

请输入一个日期：

效果图：

  

4：同时显示多个月份的日期选择器

 

请选择一个日期：

效果图：

  

5：日期选择器的一些方法

    dialog, isDisabled, hide, show, refresh, getDate, setDate

   

请输入一个日期：


Show

效果图：

  

6：日期选择器的一些事件

     6.1 beforeShow事件：显示日期选择器之前触发该事件。

     6.2 beforeShowDay事件：日期选择器上每一天选择之前都将触发该事件  function(date) {}

     6.3 onChangeMonthYear: 当日期选择器选定新的年份或者月份时触发该事件function(year, month, inst);

     6.4 onClose事件：当关闭日期选择器控件的时候触发此事件。function(dataText, inst) {}

     6.5 onSelect事件：当日期选择器选中一个日期时触发该事件。function(dataText, inst) {}   //dataText为所选的日期的字符串，inst为日期选择器实例

     

效果图：