el-date-picker时间限制

原创已于 2023-11-14 10:57:27 修改 · 1.0k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

于 2023-06-02 11:24:47 首次发布

js 专栏收录该内容

34 篇文章

订阅专栏

文章讲述了在使用ElementUI的date-picker组件时，如何设置禁止选择的日期。通过`disabledDate`属性和自定义函数，确保用户选择的开始时间不会大于结束时间，同时提供了反向检查，即结束时间不能小于开始时间。这涉及到日期处理函数Utils.date.parseTime来格式化日期。

1、情况1（value-format="yyyyMMdd"）

规则：开始时间不能比结束时间大

<el-date-picker
      v-model="dataList.listQuery.startTime"
      type="date"
      size="small"
      value-format="yyyyMMdd"
      :picker-options="pickerOptions"
      class="w-input-select mr5"
      placeholder="开始日期"
    />
    <el-date-picker
      v-model="dataList.listQuery.endTime"
      type="date"
      size="small"
      :picker-options="pickerOptions2"
      value-format="yyyyMMdd"
      class="w-input-select mr5"
      placeholder="结束日期"
    />

data(){
    return{
          pickerOptions: {
        disabledDate: (time) => {
          if (this.dataList.listQuery.endTime) {
            const startTimeObj = time
            const start = Utils.date.parseTime(startTimeObj.setDate(time.getDate() + 1), '{y}{m}{d}') // 开始时间+1天
            const end = this.dataList.listQuery.endTime // 结束时间已经被format yyyyMMdd
            return start > end
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.dataList.listQuery.startTime) {
            const startTimeObj = time
            const start = Utils.date.parseTime(startTimeObj.setDate(time.getDate() - 1), '{y}{m}{d}') // 开始时间-1天
            const end = this.dataList.listQuery.startTime // 结束时间已经被format yyyyMMdd
            return start < end
          }
        },
      },
    }
}