處理Element 日期選擇器el-date-picker 限制時間跨度3個月 。
主要通過pickerOptions里的disabledDate來控制禁止選中的日期。實現(xiàn)思想就是，當(dāng)選中第一個開始日期時，拿到該時間戳計算時間范圍，然后控制接下來選中時間在3個月以內(nèi)，超過范圍禁用掉。文章來源：http://www.zghlxwxcb.cn/news/detail-523784.html
1、在template中使用el-date-picker
<el-date-picker
v-model="value"
type="daterange"
:picker-options="pickerOptions"
value-format="yyyy-MM"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期"
@change="(value) => { dataOnChange(value) }"
> </el-date-picker>
2、在data中定義：
data() {
return {
value:'',//el-date-picker v-model的值
pickDate:'',// 存放getPickDate獲取的數(shù)據(jù)
pickerOptions: {
onPick: this.getPickDate,
disabledDate: this.disabledDate
},
}
}
3、methods中定義處理時間范圍的的方法:
methods: {
getPickDate(pick) {
this.pickDate = pick;
},
disabledDate(date) {
const { minDate, maxDate } = this.pickDate;
if (minDate && !maxDate) {
const diff = Math.abs(minDate.valueOf() - date.valueOf());
if (diff > 1000 * 3600 * 24 * 90) {
return true;
}
}
}
}
4、實現(xiàn)效果圖：選擇其實時間后會自動計算可選的時間范圍并禁用。
文章來源地址http://www.zghlxwxcb.cn/news/detail-523784.html
到了這里，關(guān)于限制Element ui日期選擇器el-date-picker時間跨度為3個月的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
