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