1. 程式人生 > 其它 >date-picker限制可選範圍區間

date-picker限制可選範圍區間

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 } } } }