elementUI的組件文檔中沒有詳細(xì)說明type="dates"如何快捷選擇一個(gè)時(shí)間段的日期，我們可以通過picker-options參數(shù)來設(shè)置快捷選擇：
<div class="block">
<span class="demonstration">多個(gè)日期</span>
<el-date-picker
type="dates"
v-model="value4"
:picker-options="pickerOption"
placeholder="選擇一個(gè)或多個(gè)日期">
</el-date-picker>
</div>
</div>
通過設(shè)置變量pickerOption的值可設(shè)置快捷選擇：文章來源：http://www.zghlxwxcb.cn/news/detail-635224.html
pickerOption:{
shortcuts:[
text:'這半個(gè)月',
onClick(picker){
let end = new Date();
let start = dateFormat(new Date(),'-');
end.setTime(end.getTime() + 3600 * 1000 * 24 * 14);
end = dateFormat(end,'-');
let allDate = getAllDate(start,end);
picker.$emit('pick', [...allDate]);
}
]
}
其中dateFormat方法是將日期格式化，getAllDate方法是獲取開始和結(jié)束日期之間的全部日期，在data中定義：文章來源地址http://www.zghlxwxcb.cn/news/detail-635224.html
let dateFormat = (time,h='')=>{
let ymd = '';
let month = (time.getMonth() + 1 )>=10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() +1));
let day = time.getDate() >= 10? time.getDate() : ('0' + time.getDate());
ymd += time.getFullYear() +h;
ymd += month + h;
ymd += day;
return ymd;
}
let getAllDate=(start,end)=>{
let allDateArr=[];
let startArr = start.split('-');
let endArr = end.split('-');
let db = new Date();
let db.setUTCFullYear(startArr[0[,startArr[1]-1,startArr[2]);
let de = new Date();
de.setUTCFullYear(endArr[0[,endArr[1]-1,endArr[2]);
let unixDb = db.getTime();
let unixDe = de.getTime();
let stamp;
const oneDay = 24*60*60*1000;
for(stamp = inixDb;stamp<=unixDe;){
allDateArr.push(dateFormat(new Date(parseInt(stamp)),'-'));
stamp = stamp+oneDay;
}
return allDateArr;
}
到了這里，關(guān)于datePicker一個(gè)或多個(gè)日期組件，如何快捷選擇多個(gè)日期（時(shí)間段）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
