日期-用Datapicker实现前一天后一天

运用了JQuery UI Datepicker 插件和一些常用日期的方法。其中Datepicker的API具体可参考【http://api.jqueryui.com/datepicker/#option-dateFormat】

 

  1 <!--
  2 需求：可选择包括今天及前三个月的日期
  3 初始化显示当天的日期
  4 点击前一天|后一天，日期自动向前|后跳转
  5 -->
  6 <!doctype html>
  7 <html lang="en">
  8 <head>
  9     <meta charset="utf-8">
 10     <title>jQuery UI Datepicker - Restrict date range</title>
 11     <link rel="stylesheet" href="css/jquery.ui.all.css">
 12     <link rel="stylesheet" href="css/jquery.ui.datepicker.css">
 13     <link rel="stylesheet" href="css/jquery.ui.theme.css">
 14     <link rel="stylesheet" href="css/jquery-ui.css">
 15     <script src="js/jquery-1.10.2.js"></script>
 16     <script src="js/jquery.ui.core.js"></script>
 17     <script src="js/jquery.ui.widget.js"></script>
 18     <script src="js/jquery.ui.datepicker.js"></script>
 19     <link rel="stylesheet" href="css/test_datePicker.css">
 20     <style>
 21     span{cursor:pointer;}
 22     .disable{color:#999;}
 23     </style>
 24     <script>
 25     $(function() {
 26     var inputVal ="";
 27     var mon = 3;
 28     var date = new Date();
 29     var year,month,day="";
 30     
 31     //初始化显示当日日期
 32     var year = date.getFullYear();
 33     var month = date.getMonth()+1;//返回Date对象的月份值，注意返回值在0(1月)~11(12月)之间
 34     var day = date.getDate();
 35     if(month.toString().length<2){month = "0"+month;}//格式为一位数时补齐0
 36     if(day.toString().length<2){day = "0"+day;}
 37     var todayDate = year+"-"+month+"-"+day;
 38     $("#datepicker").val(todayDate);
 39     
 40     //绑定日期插件
 41     $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",changeMonth:true,changeYear:true,minDate:"-3m",maxDate:new Date()});
 42     
 43     //点击前一天
 44     $(".preDate").click(function(){
 45         $(".nextDate").removeClass("disable");
 46         if($(this).hasClass("disable")){return;}
 47         inputVal = $("#datepicker").val();
 48         var getYMD = getYYMMDD(inputVal);
 49         year = parseInt(getYMD.yy,10);
 50         month = parseInt(getYMD.mm,10);
 51         day = parseInt(getYMD.dd,10);
 52         
 53         var preDate,preDay="";
 54         if(month!=1 && day==1){//除1月份以外的某月1日
 55             var premm = month-1;
 56             var predays = new Date(year+"/"+month+"/0");
 57             preDay = predays.getDate();
 58             if(premm.toString().length<2){premm = "0"+premm;}
 59             if(preDay.toString().length<2){preDay = "0"+preDay;}
 60             preDate = year+"-"+premm+"-"+preDay;
 61         }
 62         else if(day!=1){//非1日
 63             preDay = day-1;
 64             if(month.toString().length<2){month = "0"+month;}
 65             if(preDay.toString().length<2){preDay = "0"+preDay;}
 66             preDate = year+"-"+month+"-"+preDay;
 67         }
 68         else{//1月1日
 69             var preyy = year-1;
 70             var predays = new Date(preyy+"/"+13+"/0");
 71             preDay = predays.getDate();
 72             if(preDay.toString().length<2){preDay = "0"+preDay;}
 73             preDate = preyy+"-12-"+preDay;
 74         }
 75         
 76         $("#datepicker").val(preDate);
 77         
 78         //判断前一天是否已到日期范围最小值
 79         if(preDate == getMinDate(mon)){$(".preDate").addClass("disable");}
 80         else{$(".preDate").removeClass("disable");}
 81     });
 82     
 83     //点击后一天
 84     $(".nextDate").click(function(){
 85         $(".preDate").removeClass("disable");
 86         if($(this).hasClass("disable")){return;}
 87         inputVal = $("#datepicker").val();
 88         var getYMD = getYYMMDD(inputVal);
 89         year = parseInt(getYMD.yy,10);
 90         month = parseInt(getYMD.mm,10);
 91         day = parseInt(getYMD.dd,10);
 92         
 93         var nextDate,nextDay="";
 94         if(month==12&&day==31){//年末最后一天
 95             var nextyy = year+1;
 96             nextDate = nextyy+"-01-01";
 97         }
 98         else{
 99             var nextmm = month+1;
100             var nextdays = new Date(year+"/"+nextmm+"/0");
101             if(day==nextdays){//月末最后一天
102                 if(nextmm.toString().length<2){nextmm = "0"+nextmm;}
103                 nextDate = year+"-"+nextmm+"-01";
104             }
105             else{
106                 nextDay = day+1;
107                 if(nextDay.toString().length<2){nextDay = "0"+nextDay;}
108                 if(month.toString().length<2){month = "0"+month;}
109                 nextDate = year+"-"+month+"-"+nextDay;
110             }
111         }
112         
113         $("#datepicker").val(nextDate);
114         
115         if(nextDate == todayDate){$(".nextDate").addClass("disable")}
116         else{$(".nextDate").removeClass("disable");}
117     });
118     
119     });
120     
121     //返回input框中的年|月|日
122     function getYYMMDD(dateStr){
123     var dPick = {yy:0,mm:0,dd:0}
124     dPick.yy = dateStr.substring(0,4);
125     dPick.mm = dateStr.substring(5,7);
126     dPick.dd = dateStr.substring(8,10);
127     return dPick;
128     }
129     
130     //返回日期范围(3个月)的最小日期
131     function getMinDate(mon){
132     var minDate="";
133     var date = new Date();
134     var year = date.getFullYear();
135     var month = date.getMonth()+1-mon;
136     var day = date.getDate();
137     if(month<=0){
138     year-=1;
139     month+=12;
140     }
141     else if(day>28){
142         if(month==2){
143             if(year%400==0||(year%4==0&&year%100!=0)){day=29;}
144             else{day=28;}
145         }
146         else if((month==4||month==6||month==9||month==11)&&day=31){day=30;}
147     }
148     if(month.toString().length<2){month = "0"+month;}
149     if(day.toString().length<2){day = "0"+day;}
150     minDate = year+"-"+month+"-"+day;
151     return minDate;
152     }
153     </script>
154 </head>
155 <body>
156 
157 <p>Date:<span class="preDate">&lt;&lt;前一天</span><input type="text" id="datepicker" readonly="readonly"><span class="nextDate disable">后一天&gt;&gt;</span></p>
158 
159 <div class="demo-description">
160 <p></p>
161 </div>
162 </body>
163 </html>

 

结果如下图所示：

 

 

 

 

posted @ 2013-12-22 18:53  luella  Views(2671)  Comments(0)    收藏  举报