学步园

 

 

 1 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
   <script src="js/Datepicker/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
   <link href="css/datepicker.css" rel="stylesheet" type="text/css" />
   <script>
      $(function() {
          $("#datepicker").datepicker({
              showMonthAfterYear: true,
              changeMonth: true, 
              changeYear: true,
              buttonImageOnly: true,
              minDate: '-1y', maxDate: '+2y',
              dateFormat: 'yy-mm-dd',  
              onSelect: function(dateText, inst) {
                  $.ajax({ url: "hx/Datepicker.ashx?rel=1", success: function() {
                      alert('ee');
                  }
                  });
              }
          });
      });
  </script>

 

 

 

 

 

1-5

　　按照先后顺序，导入 Datepicker 需要的准备文件。

 

PASS：

4

　　日历控件的中文显示 ，jquery官网提供

 

 1 jQuery(function($){
    $.datepicker.regional['zh-CN'] = {
        closeText: '关闭',
        prevText: '<上月',
        nextText: '下月>',
        currentText: '今天',
        monthNames: ['一月','二月','三月','四月','五月','六月',
        '七月','八月','九月','十月','十一月','十二月'],
        monthNamesShort: ['一','二','三','四','五','六',
        '七','八','九','十','十一','十二'],
        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
        dayNamesMin: ['日','一','二','三','四','五','六'],
        weekHeader: '周',
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: '年'};
    $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});
 

 

 

5

　　在使用国际化同时启用changeYear和changeMonth后，两个select显示为两行

　　在官方提供的jquery-ui-1.7.2.custom.css中，应该作如下几处修改： 
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month-year {width: 100%;} 
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;} 
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; } 
应该改为： 

.ui-datepicker .ui-datepicker-title select {font-size:1em; margin:1px 0; }   
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}   
.ui-datepicker select.ui-datepicker-month{margin-left:4px;}
.ui-datepicker select.ui-datepicker-month{ width: 40%;vertical-align:top;}
.ui-datepicker select.ui-datepicker-year { width: 43%;vertical-align:top;}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: left; }   
ui-datepicker-title{vertical-align:middle;}

就OK了 （该样式根据当前项目布局自己修改，我对css不是很了解，看起来差不多就行了）

6-23

　　我的项目对日历控件的代码调整

 

9-14

　　是对控件属性的设置

showMonthAfterYear: true, // 月在年之后显示      

changeMonth: true,   // 允许选择月份     

changeYear: true,   // 允许选择年份     

dateFormat:'yy-mm-dd',  // 设置日期格式  

 

15

　　设置选择事件，调用了ajax get 的传送事件

 $.ajax({ url: "hx/Datepicker.ashx?rel=1", success: function(response) {
                      alert(response);
                  }});

 

Datepicker.ashx一般处理程序传递一个参数

success callback方法 当传递成功返回的方法

 

　　返回的数据

success: function(response) {
                      alert(response);
                  }

 

pass:在对datepicker初始化的时候设置年份的范围

如果采用

minDate: '-1y', maxDate: '+2y',

设置会出现一个问题,最后的一个年份只会显示出一个月

解决办法:  yearRange:'2010:2012',
用这个设置 最后的年份则会显示全部的12个月.