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

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

 需求：可选择包括今天及前三个月的日期

 初始化显示当天的日期

 点击前一天|后一天，日期自动向前|后跳转

 -->

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="utf-8">

     <title>jQuery UI Datepicker - Restrict date range</title>

     <link rel="stylesheet" href="css/jquery.ui.all.css">

     <link rel="stylesheet" href="css/jquery.ui.datepicker.css">

     <link rel="stylesheet" href="css/jquery.ui.theme.css">

     <link rel="stylesheet" href="css/jquery-ui.css">

     <script src="js/jquery-1.10.2.js"></script>

     <script src="js/jquery.ui.core.js"></script>

     <script src="js/jquery.ui.widget.js"></script>

     <script src="js/jquery.ui.datepicker.js"></script>

     <link rel="stylesheet" href="css/test_datePicker.css">

     <style>

     span{cursor:pointer;}

     .disable{color:#999;}

     </style>

     <script>

     $(function() {

     var inputVal ="";

     var mon = 3;

     var date = new Date();

     var year,month,day="";

     //初始化显示当日日期

     var year = date.getFullYear();

     var month = date.getMonth()+1;//返回Date对象的月份值，注意返回值在0(1月)~11(12月)之间

     var day = date.getDate();

     if(month.toString().length<2){month = "0"+month;}//格式为一位数时补齐0

     if(day.toString().length<2){day = "0"+day;}

     var todayDate = year+"-"+month+"-"+day;

     $("#datepicker").val(todayDate);

     //绑定日期插件

     $( "#datepicker" ).datepicker({dateFormat:"yy-mm-dd",changeMonth:true,changeYear:true,minDate:"-3m",maxDate:new Date()});

     //点击前一天

     $(".preDate").click(function(){

         $(".nextDate").removeClass("disable");

         if($(this).hasClass("disable")){return;}

         inputVal = $("#datepicker").val();

         var getYMD = getYYMMDD(inputVal);

         year = parseInt(getYMD.yy,10);

         month = parseInt(getYMD.mm,10);

         day = parseInt(getYMD.dd,10);

         var preDate,preDay="";

         if(month!=1 && day==1){//除1月份以外的某月1日

             var premm = month-1;

             var predays = new Date(year+"/"+month+"/0");

             preDay = predays.getDate();

             if(premm.toString().length<2){premm = "0"+premm;}

             if(preDay.toString().length<2){preDay = "0"+preDay;}

             preDate = year+"-"+premm+"-"+preDay;

         }

         else if(day!=1){//非1日

             preDay = day-1;

             if(month.toString().length<2){month = "0"+month;}

             if(preDay.toString().length<2){preDay = "0"+preDay;}

             preDate = year+"-"+month+"-"+preDay;

         }

         else{//1月1日

             var preyy = year-1;

             var predays = new Date(preyy+"/"+13+"/0");

             preDay = predays.getDate();

             if(preDay.toString().length<2){preDay = "0"+preDay;}

             preDate = preyy+"-12-"+preDay;

         }

         $("#datepicker").val(preDate);

         //判断前一天是否已到日期范围最小值

         if(preDate == getMinDate(mon)){$(".preDate").addClass("disable");}

         else{$(".preDate").removeClass("disable");}

     });

     //点击后一天

     $(".nextDate").click(function(){

         $(".preDate").removeClass("disable");

         if($(this).hasClass("disable")){return;}

         inputVal = $("#datepicker").val();

         var getYMD = getYYMMDD(inputVal);

         year = parseInt(getYMD.yy,10);

         month = parseInt(getYMD.mm,10);

         day = parseInt(getYMD.dd,10);

         var nextDate,nextDay="";

         if(month==12&&day==31){//年末最后一天

             var nextyy = year+1;

             nextDate = nextyy+"-01-01";

         }

         else{

             var nextmm = month+1;

             var nextdays = new Date(year+"/"+nextmm+"/0");

             if(day==nextdays){//月末最后一天

                 if(nextmm.toString().length<2){nextmm = "0"+nextmm;}

                 nextDate = year+"-"+nextmm+"-01";

             }

             else{

                 nextDay = day+1;

                 if(nextDay.toString().length<2){nextDay = "0"+nextDay;}

                 if(month.toString().length<2){month = "0"+month;}

                 nextDate = year+"-"+month+"-"+nextDay;

             }

         }

         $("#datepicker").val(nextDate);

         if(nextDate == todayDate){$(".nextDate").addClass("disable")}

         else{$(".nextDate").removeClass("disable");}

     });

     });

     //返回input框中的年|月|日

     function getYYMMDD(dateStr){

     var dPick = {yy:0,mm:0,dd:0}

     dPick.yy = dateStr.substring(0,4);

     dPick.mm = dateStr.substring(5,7);

     dPick.dd = dateStr.substring(8,10);

     return dPick;

     }

     //返回日期范围(3个月)的最小日期

     function getMinDate(mon){

     var minDate="";

     var date = new Date();

     var year = date.getFullYear();

     var month = date.getMonth()+1-mon;

     var day = date.getDate();

     if(month<=0){

     year-=1;

     month+=12;

     }

     else if(day>28){

         if(month==2){

             if(year%400==0||(year%4==0&&year%100!=0)){day=29;}

             else{day=28;}

         }

         else if((month==4||month==6||month==9||month==11)&&day=31){day=30;}

     }

     if(month.toString().length<2){month = "0"+month;}

     if(day.toString().length<2){day = "0"+day;}

     minDate = year+"-"+month+"-"+day;

     return minDate;

     }

     </script>

 </head>

 <body>

 <p>Date:<span class="preDate">&lt;&lt;前一天</span><input type="text" id="datepicker" readonly="readonly"><span class="nextDate disable">后一天&gt;&gt;</span></p>

 <div class="demo-description">

 <p></p>

 </div>

 </body>

 </html>
结果如下图所示：
码农公寓

相关文章
