資訊專欄INFORMATION COLUMN
摘要：需求選擇日期范圍，但是選擇范圍需要在一周以內(nèi)。方法考慮到有兩種設(shè)計(jì)方式用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。用日期范圍選擇器。
需求：
選擇日期范圍，但是選擇范圍需要在一周以內(nèi)。舉個(gè)栗子：假設(shè)選第一個(gè)日期為1月17日，那么1月11日以前、1月23號(hào)以后的日期都需要設(shè)為禁選狀態(tài)。
方法：
考慮到有兩種設(shè)計(jì)方式：
1、用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。
2、用日期范圍選擇器。
第一種方式?jīng)]有做demo，有特殊需求的小伙伴請(qǐng)留言。這里選擇使用日期范圍選擇器，使用起來(lái)可以預(yù)見代碼會(huì)清爽很多。
效果圖：
代碼：
data() {
let _minTime = null
let _maxTime = null
return {
datePick: [new Date().format("yyyy-MM-dd") ,new Date().format("yyyy-MM-dd")], //默認(rèn)選擇當(dāng)天，看個(gè)人需求
pickerOptions:{
onPick(time){
// 如果選擇了只選擇了一個(gè)時(shí)間
if (!time.maxDate) {
let timeRange = 6*24*60*60*1000 // 6天
_minTime = time.minDate.getTime() - timeRange // 最小時(shí)間
_maxTime = time.minDate.getTime() + timeRange // 最大時(shí)間
// 如果選了兩個(gè)時(shí)間，那就清空本次范圍判斷數(shù)據(jù)，以備重選
} else {
_minTime = _maxTime = null
}
},
disabledDate(time) {
// onPick后觸發(fā)
// 該方法會(huì)輪詢當(dāng)3個(gè)月內(nèi)的每一個(gè)日期，返回false表示該日期禁選
if(_minTime && _maxTime){
return time.getTime() < _minTime || time.getTime() > _maxTime
}
}
}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/53541.html
摘要：需求選擇日期范圍，但是選擇范圍需要在一周以內(nèi)。方法考慮到有兩種設(shè)計(jì)方式用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。用日期范圍選擇器。 需求：選擇日期范圍，但是選擇范圍需要在一周以內(nèi)。舉個(gè)栗子：假設(shè)選第一個(gè)日期為1月17日，那么1月11日以前、1月23號(hào)以后的日期都需要設(shè)為禁選狀態(tài)。 方法：考慮到有兩種設(shè)計(jì)方式：1、用兩個(gè)獨(dú)立時(shí)間選擇器控制，實(shí)現(xiàn)起來(lái)比較混亂。2、用日期范圍選擇器。第一種...
Element是一套基于vue2.x的一個(gè)ui框架。官方文檔也很詳細(xì)，這里記錄一個(gè)element-ui日期插件的補(bǔ)充官方文檔中使用picker-options屬性來(lái)限制可選擇的日期，下面舉例補(bǔ)充： 單個(gè)日期時(shí)間輸入框 組件代碼： 情景1: 設(shè)置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
閱讀 1242·2021-11-22 15:24
閱讀 4651·2021-09-23 11:51
閱讀 2397·2021-09-08 09:36
閱讀 3570·2019-08-30 15:43
閱讀 1360·2019-08-30 13:01
閱讀 1165·2019-08-30 12:48
閱讀 598·2019-08-29 12:52
閱讀 3438·2019-08-29 12:41
