运用了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>

结果如下图所示：

 

日期-用Datapicker实现前一天后一天的更多相关文章

  1. input绑定datapicker控件后input再绑定blur或者mouseout等问题

    input绑定datapicker控件后input再绑定blur或者mouseout等问题 问题描述:今天在修改一个东西的时候需要给一个input输入域绑定blur事件,从而当它失去焦点后动态修改其中 ...

  2. JavaScript如何实现日期的前一天后一天转变

    1.生成时间 var data =new Date(); 2.获得时间戳     什么是时间戳? 时间戳是指格林威治时间自1970年1月1日(00:00:00 GTM)至当前时间的总秒数.它也被称为U ...

  3. Javascript/Jquery实现日期前一天后一天

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. [MySQL] 按日期进行统计（前一天、本周、某一天）

    在mysql数据库中,常常会遇到统计当天的内容.例如,在user表中,日期字段为:log_time统计当天 sql语句为: select * from user where date(log_time ...

  5. （转载）MySql按日期进行统计（前一天、本周、某一天）

    (转载)http://www.yovisun.com/mysql-date-statistics.html 在mysql数据库中,常常会遇到统计当天的内容.例如,在user表中,日期字段为:log_t ...

  6. mysql 获取昨天日期、今天日期、明天日期以及前一个小时和后一个小时的时间

    1.当前日期 select DATE_SUB(curdate(),INTERVAL 0 DAY) ; 2.明天日期select DATE_SUB(curdate(),INTERVAL -1 DAY) ...

  7. python获取时间————前一天后一天前一小时后一小时前一分钟后一分钟

    获取当天日期 一: import time print(time.strftime("%Y-%m-%d")) #输出当前日期 2018-05-01 二: import dateti ...

  8. JSjs获取当前时间的前一天/后一天（昨天/明天）

    Date curDate = new Date(); var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天 var next ...

  9. js获取当前时间的前一天/后一天

    Date curDate = new Date();var preDate = new Date(curDate.getTime() - 24*60*60*1000); //前一天var nextDa ...

随机推荐

  1. 【转】shell 教程——04 什么时候使用Shell

    因为Shell似乎是各UNIX系统之间通用的功能,并且经过了POSIX的标准化.因此,Shell脚本只要“用心写”一次,即可应用到很多系统上.因此,之所以要使用Shell脚本是基于: 简单性:Shel ...

  2. rman进行备份、恢复

    rman备份可以很复杂,但学习需要由浅入深,下面是最常见的几种备份.恢复方式. 备份数据的路径与大小: SQL> show parameter  DB_RECOVERY_FILE_DEST NA ...

  3. Code Forces 711C Coloring Trees

    C. Coloring Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. WPF ArrangeOverride与MeasureOverride

    1.MeasureOverride  是FrameworkElement.MeasureOverride 方法 当重写在派生类中,单位是对于子元素所需要布局的大小并确定FrameworkElement ...

  5. Servlet小知识点

    1. Sevlet是一个java类,供以其他程序调用,不能独立运行,需要Servlet引擎(Servlet容器)来管理和调度. 2. 服务器启动后,一般只会创建一个Servlet实例对象,init方法 ...

  6. jOOQ

    jOOQ http://www.jooq.org/ jOOQ是个更不错的SQL解决方案. 你可以在Java中以一种类型安全的方式来书写SQL语句: // Typesafely execute the ...

  7. SharePoint PerformancePoint Service-PowerShell

    1. 配置托管服务账户 Set-SPPerformancePointSecureDataValues -ServiceApplication "PerformancePoint Servic ...

  8. android开发：@SuppressLint( NewApi )

    这个是android带的lint工具提示的,lint官方的说法是 Improving Your Code with lint,应该是帮助提升代码的 ,如果不想用的话,可以右键点工程,然后在androi ...

  9. [Oracle] - 性能优化工具（5） - AWRSQL

    在AWR中定位到问题SQL语句后想要了解该SQL statement的详细运行计划,于是就用AWR报告中得到的SQL ID去V$SQL等几个动态性能视图中查询,但发现V$SQL或V$SQL_PLAN视 ...

  10. BMVC reading list

    'Combining Local and Global Cues for Closed Contour Extraction' Vida Movahedi, James Elder 'FRIF: Fa ...