element 中设置el-date-picke 禁用今天及其以后的日期禁止选择,设置时间跨度30天

最新推荐文章于 2024-08-09 17:18:14 发布

青衣浏阳

最新推荐文章于 2024-08-09 17:18:14 发布

阅读量5k

点赞数 3

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/m0_49016709/article/details/121337253

版权

element组件date-picke 设置今天开始以后的我日期都不可选。
官方文档提供一个disabledDate 属性，返回值是一个回调函数，可以实现
在这里插入图片描述
下面看代码
给组件绑定options 属性，设置disabledDate 的值是一个函数函数的返回值是Boolean

 <el-date-picker class="dateCom"
		       v-model="form.date"
		        type="daterange"
		        value-format="yyyy-MM-dd"
		        range-separator="至"
		        start-placeholder="开始日期"
		        end-placeholder="结束日期"
		        :picker-options="{disabledDate:dateOptions}">

// 选择今天及今天之前的日期
dateOptions (time) {
   return time.getTime() > Date.now() - 8.64e6
},
// 选择今天及今天以后的日期
dateOptions (time) {
   return time.getTime() < Date.now() - 8.64e6
 },

2、设置时间跨度30天

  <el-date-picker v-model="date"
                    :editable="false"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                    type="daterange"
                    key="day"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:230px"
                    v-if="type===5"
                    :picker-options="pickerOptions">
    </el-date-picker>

 data () {
    return {
      minDate: '',
      maxDate: '',
      pickerOptions: { // 时间范围选择控制
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        },
        disabledDate: (time) => { // 查询时间跨度为31天
          if (this.minDate) {
            let range = 30 * 24 * 3600 * 1000
            return time.getTime() > Date.now() || time.getTime() > (this.minDate.getTime() + range) || time.getTime() < (this.minDate.getTime() - range)
          }
          return time.getTime() > Date.now()
        }
      }
    }
  },