elementUI el-date-picker控制时间禁止点击

完成日期和时间选择 ，条件是 8:00  -  20:00 。

type="datetime"  可以实现日期与时间同时选择但是不能自定义条件。

<el-date-picker
    v-model="dxDate"
    type="date"
    value-format="yyyy-MM-dd"
    :picker-options="pickerTime"
     placeholder="选择日期" @change="mergeDateTime">
</el-date-picker>
<el-time-picker
     v-model="dxTime"
     :picker-options="{ selectableRange: '08:00:00 - 20:00:00'}"
     format="HH:mm"
     value-format="HH:mm"
     placeholder="时间点" @change="mergeDateTime">
</el-time-picker>

 

js控制时间包含今日的7天

<el-date-picker
                v-model="activityTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="cardOpenPick" 
                :unlink-panels="true"
                :picker-options="pickerOptions"
                >
</el-date-picker>

data 中
pickerOptions: {
     disabledDate(time) {
     // 设置可选择的日期为今天之后的一个月内
     const curDate1 = (new Date()).getTime()
     // 这里算出一个月的毫秒数, 这里使用30的平均值,实际中应根据具体的每个月有多少天计算
     const day = 6 * 24 * 3600 * 1000
     const dateRegion = curDate1 + day
     return time.getTime() < Date.now() - 8.64e7  ||  time.getTime() > dateRegion
   }
          
}
methods中
disabledDate(time) {
    return time.getTime() < Date.now() - 8.64e7  
}