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

<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>

//首先在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");

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('不同')
}
}, }
});

//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);