element-ui中時間多選控制元件
阿新 • • 發佈:2019-02-14
直接上程式碼:
<el-date-picker size="small"
v-model="nowDate"
@change="getSTime"
type="datetimerange"
range-separator="~"
start-placeholder="請輸入開始時間"
end-placeholder="請輸入結束時間"
:picker-options="pickerOptions">
</el-date-picker>
時間範圍判斷:
data(){
return {
pickerOptions: {
disabledDate(time) {
// 設定選擇一個月之前到今天的日期
let curDate = (new Date()).getTime()
let oneMonths = curDate - 30 * 24 * 3600 * 1000
// 到今天的時間 或者 小於1個月之前的時間
return time.getTime() > Date.now() || time.getTime() < oneMonths
}
}
}
},
methods:{
getSTime(val) {
this .nowDate = val// 這個sTime是在data中宣告的,也就是v-model繫結的值
let startDate = val[0].getTime();
let endDate = val[1].getTime();
let sevenDay = 7 * 24 * 3600 * 1000;
if(startDate + sevenDay < endDate){
this.$message({
message: '結束時間不能大於開始時間7天',
type: 'warning'
});
this.nowDate = [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()];
}
}
}