摘要:需求選擇日期范圍,但是選擇范圍需要在一周以內。方法考慮到有兩種設計方式用兩個獨立時間選擇器控制,實現起來比較混亂。用日期范圍選擇器。
需求:
選擇日期范圍,但是選擇范圍需要在一周以內。舉個栗子:假設選第一個日期為1月17日,那么1月11日以前、1月23號以后的日期都需要設為禁選狀態。
方法:
考慮到有兩種設計方式:
1、用兩個獨立時間選擇器控制,實現起來比較混亂。
2、用日期范圍選擇器。
第一種方式沒有做demo,有特殊需求的小伙伴請留言。這里選擇使用日期范圍選擇器,使用起來可以預見代碼會清爽很多。
效果圖:
代碼:
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 // 最大時間 // 如果選了兩個時間,那就清空本次范圍判斷數據,以備重選 } else { _minTime = _maxTime = null } }, disabledDate(time) { // onPick后觸發 // 該方法會輪詢當3個月內的每一個日期,返回false表示該日期禁選 if(_minTime && _maxTime){ return time.getTime() < _minTime || time.getTime() > _maxTime } } } } }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53541.html
摘要:需求選擇日期范圍,但是選擇范圍需要在一周以內。方法考慮到有兩種設計方式用兩個獨立時間選擇器控制,實現起來比較混亂。用日期范圍選擇器。 需求:選擇日期范圍,但是選擇范圍需要在一周以內。舉個栗子:假設選第一個日期為1月17日,那么1月11日以前、1月23號以后的日期都需要設為禁選狀態。 方法:考慮到有兩種設計方式:1、用兩個獨立時間選擇器控制,實現起來比較混亂。2、用日期范圍選擇器。第一種...
Element是一套基于vue2.x的一個ui框架。官方文檔也很詳細,這里記錄一個element-ui日期插件的補充官方文檔中使用picker-options屬性來限制可選擇的日期,下面舉例補充: 單個日期時間輸入框 組件代碼: 情景1: 設置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...
摘要:獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
摘要:獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...
閱讀 1164·2021-11-22 15:24
閱讀 4440·2021-09-23 11:51
閱讀 2302·2021-09-08 09:36
閱讀 3514·2019-08-30 15:43
閱讀 1295·2019-08-30 13:01
閱讀 1115·2019-08-30 12:48
閱讀 530·2019-08-29 12:52
閱讀 3366·2019-08-29 12:41