date-picker限制可選範圍區間
阿新 • • 發佈:2022-03-01
1、el-date-picker中的picker-options屬性用來控制不可選日期區域和今天、明天等快捷選擇
2、官方文件提供的demo中只有大於某個日期不可選
3、我們發現disabledDate最後return了一個返回值,我們修改這個返回值來實現大於某個日期小於某個日期都不可選,也就是設定了可選範圍
HTML:
<el-date-picker v-model="beginTime" :type="dateType" :picker-options="pickerOptionsBegin" placeholder="開始日期"> </el-date-picker> <el-date-picker v-model="endTime" :type="dateType" :picker-options="pickerOptionsBegin" placeholder="結束日期"> </el-date-picker>
JS:
data () { return { timeStamp: 2 * 24 * 60 * 60 * 1000, // 2天轉為毫秒的數值,這裡儘量不要直接寫算好的數字,可讀性不高 beginTime: '', endTime: '' // 結束時間,常見需求是開始時間不大於結束時間 } }, computed: { this.pickerOptionsBegin: { disabledDate: time => { // time為形參,實參就是自動獲取到的beginTime元素可以選的值 if (time && this.endTime) { // 注意:這裡要把time.endTime以及你要計算的時間用.getTime()轉為時間戳 // 大於結束時間不可選,小於結束時間減去兩天(也就是昨天)不可選。結果是隻能選昨天和今天 return time.getTime() > new Date(endTime).getTime() || time.getTime() < new Date(endTime).getTime() - timeStamp } } } }