element-ui 時間選擇器限制范圍的實現（隨動）
更新時間：2019年01月09日 10:49:32 作者：missing
這篇文章主要介紹了element-ui 時間選擇器限制范圍（隨動）,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
需求：
選擇日期范圍，但是選擇范圍需要在一周以內。舉個栗子：假設選第一個日期為1月17日，那么1月11日以前、1月23號以后的日期都需要設為禁選狀態(tài)。
方法：
考慮到有兩種設計方式：
1、用兩個獨立時間選擇器控制，實現起來比較混亂。
2、用日期范圍選擇器。
第一種方式沒有做demo，有特殊需求的小伙伴請留言。這里選擇使用日期范圍選擇器，使用起來可以預見代碼會清爽很多。
效果圖：
代碼：
<el-date-picker v-model="datePick" type="daterange" value-format='yyyy-MM-dd' size="small" :picker-options="pickerOptions" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期"> </el-date-picker>
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后觸發(fā)
// 該方法會輪詢當3個月內的每一個日期，返回false表示該日期禁選
if(_minTime && _maxTime){
return time.getTime() < _minTime || time.getTime() > _maxTime
}
}
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天在研究微信公眾號接口問題,下面這篇文章主要給大家介紹了關于微信公眾平臺API錯誤代碼41002問題的解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
一直想為 SWFObject 這個JS的類庫寫一個推薦帖，因為他輕便，同時功能強大，為我們的開發(fā)帶來了很大的便捷。2008-07-07
這篇文章主要介紹了javascript計算漸變顏色的實例的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內容，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇layui table去掉右側滑動條的實現方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
百度面試時問的一道題目，蠻常規(guī)的，但是當時自己的回答挺差勁的。現在總結記錄下~2011-08-08
這篇文章主要介紹了3種javascript實現string的substring方法，需要的朋友可以參考下2015-11-11
下面小編就為大家?guī)硪黄褂胏anvas進行圖像編輯的實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
寄生組合式繼承,是集寄生式繼承和組合繼承的有點與一身,主要是通過借用構造函數來繼承屬性,通過原型鏈的混成形式來繼承方法,這篇文章主要給大家介紹了關于JavaScript寄生式組合繼承的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了JS數組排序技巧,實例匯總了JavaScript冒泡排序、sort排序、快速排序、希爾排序等,并附帶分析了sort排序的相關注意事項,需要的朋友可以參考下2015-11-11