datarange类型的el-data-picker动态限制日期跨度

wobofan2006

已于 2024-05-07 10:22:05 修改

阅读量205

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2023-04-20 10:09:34 首次发布

本文链接：https://blog.csdn.net/wobofan2006/article/details/130259882

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

datarange类型的el-data-picker动态限制日期跨度

<el-date-picker
      value-format="yyyy-MM-dd"
      v-model="dateRange"
      size="small"
      type="daterange"
      :clearable='false'
      :picker-options="daterangeOption"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
</el-date-picker>

export default {
	data () {
		timeLim: null,
		daterangeOption: {
        disabledDate: (date) => {
            let lastMonth = this.timeLim.getTime()  - 31*3600*24*1000
            let nextMonth = this.timeLim.getTime()  + 31*3600*24*1000
            return date.getTime() >= Date.now() || date.getTime() < lastMonth || date.getTime() > nextMonth;
        },
        onPick: (date) => {
          if (date.maxDate === null) {
            this.timeLim = date.minDate
          } else {
            this.timeLim = null
          }
        }
      },
	}
}