关于HTML页面中上一天下一天的功能实现（上一月、下一月同理）

一、今天在写东西的时候需要写一个上一天下一天的功能，网上找插件很麻烦而且会很臃肿，所以自己写了一个。特此记录下。

二、html代码如下：

    <!-- 日期框 -->
        <ul class="cp-cops-date">
          <i @click="priorDay" class="cp-priorDay">
             <span class="iconfont icon-jiantou13-copy-copy aui-text-info"></span>
          </i>
          <input type="date" id="copsDate"  class="cp-cops-dateVal">
          <i @click="nextDay" class="cp-nextDay">
            <span class="iconfont icon-jiantou11 aui-text-info" startPlay></span>
          </i>

        </ul>

三、js脚本如下

    priorDay:function(){
        var pDate = $('#copsDate').val(),
            vDate = new Date(pDate),
            newDate = vDate.getTime()-1000*60*60*24,
            finaDate = new Date(newDate);
        var year = finaDate.getFullYear(),
            month = finaDate.getMonth()+1,
            day = finaDate.getDate();
        if (month < 10) {
          month = '0' + month;
        }
        if (day < 10) {
          day = '0' + day;
        }
        cpDate = year + '-' + month + '-' + day;
        $('#copsDate').val(cpDate);
      },
      nextDay:function(){
        var pDate = $('#copsDate').val(),
            vDate = new Date(pDate),
            newDate = vDate.getTime()+1000*60*60*24,
            finaDate = new Date(newDate);
        var year = finaDate.getFullYear(),
            month = finaDate.getMonth()+1,
            day = finaDate.getDate();
        if (month < 10) {
          month = '0' + month;
        }
        if (day < 10) {
          day = '0' + day;
        }
        cpDate = year + '-' + month + '-' + day;
        $('#copsDate').val(cpDate);

      },

四、对于上一月下一月的情况同样适用，只需改下参数就行了。

 

也欢迎登录我的个人网站，里面有更多的文章及技术咨询在等你：http://www.guangmuhua.com