昨天為了滿足項目需求，挖掘了時間控件的一些技巧。
需滿足的功能：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:''
}
},