vue小荔枝，时间控件，动态按月份增减。

1. 依赖框架有jq，bootstrap3.0，vue2.0;
2. 自封装（搬运）时间控件，bootstrap-datetimepicker。资源下载：看这里

• 需求：
• 默认本地时间，相隔一个月
• 四个选项：1一个月，一个季度，半年，一年。
• 如果结束日期不变，那么默认递增即可，如果结束日期改变了，以变更的日期递增月份。

html结构：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div id="app">         <div class="col-md-5 form-inline">             <div class="form-group">                 <input type="text" class="form-control"  id="datetimepicker">--                 <input type="text" class="form-control"  id="dateEnd">             </div>               <div id="tool">                 <label>                     <input type="radio" name="date" checked  @click="dateSet(1)">间隔一个月                 </label>                 <label>                     <input type="radio" name="date"  @click="dateSet(4)">间隔四个月                 </label>                 <label >                     <input type="radio" name="date" @click="dateSet(6)">间隔六个月                 </label>                 <label>                     <input type="radio" name="date"  @click="dateSet(12)">间隔12个月                 </label>             </div>         </div>     </div>

　　时间插件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//首先在date原型上扩展一个自定义时间解析方法 Date.prototype.Format_ = function(fmt) {     var o = {         "M+" : this.getMonth()+1,                 //月份         "d+" : this.getDate(),                    //日         "h+" : this.getHours(),                   //小时         "m+" : this.getMinutes(),                 //分         "s+" : this.getSeconds(),                 //秒         "q+" : Math.floor((this.getMonth()+3)/3), //季度         "S"  : this.getMilliseconds()             //毫秒     };     if(/(y+)/.test(fmt)) {         fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));     }     for(var k in o) {         if(new RegExp("("+ k +")").test(fmt)){             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         }     }     return fmt; }; //然后new两个date出来分别是当月和上个月 var begin=new Date(); var end=new Date(); new Date(begin.setMonth((new Date().getMonth()-1)));//-1就是前一个月；+1就是下一个月 var begintime= begin.Format_("yyyy-MM-dd"); var endtime=end.Format_("yyyy-MM-dd");

　　vue-逻辑代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

new Vue({        el:"#app",        data:{            b:begintime,            e:endtime        },        methods:{            dateSet:function (num) {                var thas=this,cacheEnd=thas.e,thisEnd=$('#dateEnd').val();                var begin=new Date();                var end=new Date();                if(cacheEnd==thisEnd){                    new Date(begin.setMonth((new Date().getMonth()-num)));//-1就是前一个月；+1就是下一个月                    var begintime= begin.Format_("yyyy-MM-dd");                    $('#datetimepicker').val(begintime);                    console.log('相同')                }else {                    var d = new Date(thisEnd.replace(/-/g,"/"));                    d.setMonth(d.getMonth()- num);                    var str = d.getFullYear()+"-"+(d.getMonth()>=9?d.getMonth()+1:"0"+(d.getMonth()+1))+"-"+(d.getDate()>9?d.getDate():"0"+d.getDate());                    $("#datetimepicker").val(str);                    console.log('不同')                }            },          }    });

　　初始化时间容器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//time时间插件     $('#datetimepicker').datetimepicker({         minView: "month", //很关键，如果不限制到月视图，它默认是到小时的。         todayHighlight:true,         language:'zh-CN',         format:'yyyy-mm-dd',         autoclose: true,     }).val(begintime);       $('#dateEnd').datetimepicker({         minView: "month",         todayHighlight:true,         language:'zh-CN',         format:'yyyy-mm-dd',         autoclose: true,     }).val(endtime);

　　ps:在搬运代码这条路上，我会一直走下去。