首页 > 代码库 > vue小荔枝，时间控件，动态按月份增减。
vue小荔枝，时间控件，动态按月份增减。
- 依赖框架有jq，bootstrap3.0，vue2.0;
- 自封装（搬运）时间控件，bootstrap-datetimepicker。资源下载：看这里
- 需求：
- 默认本地时间，相隔一个月
- 四个选项：1一个月，一个季度，半年，一年。
- 如果结束日期不变，那么默认递增即可，如果结束日期改变了，以变更的日期递增月份。
html结构：
<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");
vue-逻辑代码
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);
ps:在搬运代码这条路上，我会一直走下去。
vue小荔枝，时间控件，动态按月份增减。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。