由于項(xiàng)目的特定要求沐批，需要讓時(shí)間范圍的結(jié)束時(shí)間默認(rèn)為空稽穆，但開始時(shí)間需要填入默認(rèn)值，element時(shí)間范圍控件不支持這種形式向挖，所以只能拆開用兩個(gè)時(shí)間控件來實(shí)現(xiàn)日期時(shí)間范圍。
時(shí)間控件
由于接口傳參要求時(shí)間的格式為
yyyy-MM-dd HH:mm:ss炕舵，所以定義了value-format這里遇到了一個(gè)坑何之，下面會(huì)提到，代碼如下
<el-form-item label="時(shí)間范圍">
<el-date-picker
v-model="dataForm.startTime"
type="datetime"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
range-separator="至"
placeholder="開始時(shí)間"
default-time="00:00:00"
align="right">
<span slot="append">-</span>
</el-date-picker>
</el-form-item>
<el-form-item label="">
<el-date-picker
v-model="dataForm.endTime"
type="datetime"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions1"
placeholder="結(jié)束時(shí)間"
default-time="23:59:59"
align="right">
</el-date-picker>
</el-form-item>
因?yàn)橐獎(jiǎng)討B(tài)更改時(shí)間可選范圍咽筋，所以將disabledDate代碼塊在計(jì)算屬性中實(shí)現(xiàn)
export default {
data() {
return {
dataForm: {
startTime: '2020-07-01 00:00:00',
endTime: ''
},
}
},
created() {
},
computed: {
pickerOptions0() {
let _this = this
return {
disabledDate(time) {
//有結(jié)束時(shí)間時(shí)開始時(shí)間禁選結(jié)束時(shí)間之后的時(shí)間或者禁選當(dāng)前時(shí)間之后的時(shí)間
if (_this.dataForm.endTime != "") {
return time.getTime() > Date.now() || time.getTime() > _this.dataForm.endTime;
} else {
return time.getTime() > Date.now();
}
}
}
},
pickerOptions1() {
let _this = this
return {
disabledDate(time) {
//結(jié)束時(shí)間禁止選開始時(shí)間之前的時(shí)間以及當(dāng)前時(shí)間之后的時(shí)間
return time.getTime() < _this.dataForm.startTime || time.getTime() > Date.now();
}
}
}
},
}
按照這個(gè)方法發(fā)現(xiàn)限制范圍部分生效溶推，并且在操作控件之后范圍并沒有發(fā)生變化，經(jīng)過一陣子懷疑人生之后我終于發(fā)現(xiàn)了問題所在奸攻，矛頭就是disabledDate方法判斷時(shí)用的是時(shí)間戳蒜危，而我們定義了時(shí)間格式為"yyyy-MM-dd HH:mm"，這就到導(dǎo)致time.getTime() < _this.dataForm.startTime這段代碼無(wú)法在一起比較睹耐，從而也就沒生效辐赞，只生效了time.getTime() > Date.now()的判斷。
- 既然找到了原因我們就知道了解決的方向硝训，那么解決辦法有兩種
- 在
disabledDate的方法中將_this.dataForm.startTime响委、_this.dataForm.endTime轉(zhuǎn)成時(shí)間戳用來比較 - 將時(shí)間控件的
value-format改成timestamp也就是時(shí)間戳格式，在調(diào)用接口時(shí)將startTime和endTime轉(zhuǎn)成我們要的格式傳入
兩個(gè)方案對(duì)比選擇第二種窖梁，那么將上面的代碼改一下
<el-form-item label="時(shí)間范圍">
<el-date-picker
v-model="dataForm.startTime"
type="datetime"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"<!-- 改動(dòng)部分 -->
:picker-options="pickerOptions0"
range-separator="至"
placeholder="開始時(shí)間"
default-time="00:00:00"
align="right">
<span slot="append">-</span>
</el-date-picker>
</el-form-item>
<el-form-item label="">
<el-date-picker
v-model="dataForm.endTime"
type="datetime"
format="yyyy-MM-dd HH:mm"
value-format="timestamp"<!-- 改動(dòng)部分 -->
:picker-options="pickerOptions1"
placeholder="結(jié)束時(shí)間"
default-time="23:59:59"
align="right">
</el-date-picker>
</el-form-item>
export default {
data() {
return {
dataForm: {
startTime: '',
endTime: ''
},
}
},
created() {
//設(shè)置開始時(shí)間<!-- 改動(dòng)部分 -->
this.dataForm.startTime = new Date(new Date().getTime() - 3 * 24 * 3600 * 1000);
},
computed: {
pickerOptions0() {
let _this = this
return {
disabledDate(time) {
//有結(jié)束時(shí)間時(shí)開始時(shí)間禁選結(jié)束時(shí)間之后的時(shí)間或者禁選當(dāng)前時(shí)間之后的時(shí)間
if (_this.dataForm.endTime != "") {
return time.getTime() > Date.now() || time.getTime() > _this.dataForm.endTime;
} else {
return time.getTime() > Date.now();
}
}
}
},
pickerOptions1() {
let _this = this
return {
disabledDate(time) {
//結(jié)束時(shí)間禁止選開始時(shí)間之前的時(shí)間以及當(dāng)前時(shí)間之后的時(shí)間
return time.getTime() < _this.dataForm.startTime || time.getTime() > Date.now();
}
}
}
},
}
開始時(shí)間
結(jié)束時(shí)間
這樣就成功了赘风！結(jié)束時(shí)間可以根據(jù)開始時(shí)間的選擇動(dòng)態(tài)改變可選范圍了~
功能實(shí)現(xiàn)，最后只需將時(shí)間戳轉(zhuǎn)成我們需要的格式纵刘，我們?cè)俣x一個(gè)全局函數(shù)來處理時(shí)間戳轉(zhuǎn)化
/**
* 時(shí)間戳轉(zhuǎn)化為年 月 日 時(shí) 分 秒
* number: 傳入時(shí)間戳
* format：返回格式邀窃，支持自定義，但參數(shù)必須與formateArr里保持一致
*/
export function formatTime(number,format = 'Y-M-D h:m:s') {
var formateArr = ['Y','M','D','h','m','s'];
var returnArr = [];
if(number == ''){
return ''
}else{
var date = new Date(number);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (var i in returnArr)
{
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
}
//數(shù)據(jù)轉(zhuǎn)化
export function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
這里實(shí)在懶得自己寫假哎，拿來主義用了一下別人的代碼2333~蛔翅，原博，不過他的代碼有點(diǎn)小問題改了一下下位谋，在項(xiàng)目中引入
import { formatTime } from '@/utils'
this.$http({
url: this.$http.adornUrl('url'),
method: 'get',
params: this.$http.adornParams({
startTime: formatTime(this.dataForm.startTime),
endTime: formatTime(this.dataForm.endTime)
})
}).then(({data}) => {
if (data && data.code === 0) {
...
} else {
}
})
大功告成了~
總結(jié)
我們?cè)谑褂?code>disabledDate時(shí)要注意格式問題山析，element用的是時(shí)間戳來比較，如定義了value-format屬性需要注意可能導(dǎo)致的相應(yīng)問題掏父，須通過轉(zhuǎn)換來解決笋轨。
