element-ui 日期选择器-开始结束日期选择限制

代码

最简洁代码

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="开始日期"
      :picker-options="pickerOptionsStart"
    />
    <span>至</span>
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="结束日期"
      :picker-options="pickerOptionsEnd"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      // 开始结束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endDate) {
            return time.getTime() > new Date(this.endDate).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.startDate) {
            return time.getTime() < new Date(this.startDate).getTime() - 86400000
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>

图示

原文链接