昨天为了满足项目需求，挖掘了时间控件的一些技巧。
需满足的功能：1如果用户不选择时间，显示一个默认时间
2时间选择器打开，显示的是上个月和这个月的日期
3不能选择new Date()之后的时间
4传给后台时间数据为 2018-05-25格式
<el-date-picker
v-model="value7"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
unlink-panels
value-format="yyyy-MM-dd"
:default-value="timeDefaultShow"
:picker-options="pickerOptions1">
</el-date-picker>
原插件：
原插件 显示的是 本月和下个月的日期，而需求是要显示本月和上个月的日期。
| default-value | 可选，选择器打开时默认显示的时间 | Date | 可被new Date()解析 |
— |
配置项手册
this.timeDefaultShow = new Date();
this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
刚进来默认显示 new Date()之前30天 -----new Date()
通过改变value7
this.value7=[ new Date((Date.now()-3600 * 1000 * 24 * 30)).format("yyyy-MM-dd"), new Date().format("yyyy-MM-dd") ] ;
format 方法写在Date构造函数的原型链上。因为我们可以通过这样将 new Date()生成的 Fri May 25 2018 00:00:00 GMT 0800 (中国标准时间) 转换为 2018-05-26
这样才能满足我们的需求，这只是让我们自己放上去的时间满足输出格式需求，
我们还需要利用插件的 value-format="yyyy-MM-dd" 使得我们选择的时间也可以输出相同格式。
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见日期格式 | — |
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()之后的时间 配置项手册 default-value 设置disabledDate
:default-value="timeDefaultShow"
data () {
return {
msg: 'Welcome to Your Vue.js App',
domainName: '',
value7: '',
time:'',
domainList: [],
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
}
},
timeDefaultShow:''
}
},