跳至主要內容

element-ui日期选择器禁止选择指定日期

zfh原创开发日志Vue小于 1 分钟约 290 字

<template>
  <div style="margin:20px">
    <el-row>
      禁止选择过去日期(不能选择今天)
      <el-date-picker
        v-model="date1"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
    </el-row>

    <el-row>
      禁止选择过去日期(可以选择今天)
      <el-date-picker
        v-model="date2"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions2"
      >
      </el-date-picker>
    </el-row>

    <el-row>
      禁止选择未来日期(不能选择今天)
      <el-date-picker
        v-model="date3"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions3"
      >
      </el-date-picker>
    </el-row>

    <el-row>
      禁止选择未来日期(可以选择今天)
      <el-date-picker
        v-model="date4"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions4"
      >
      </el-date-picker>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: '',
      date2: '',
      date3: '',
      date4: '',
      pickerOptions1: {
        disabledDate(time) {
          // 禁止选择过去日期(不能选择今天)
          return time.getTime() < Date.now()
        },
      },
      pickerOptions2: {
        disabledDate(time) {
          // 禁止选择过去日期(可以选择今天)
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        },
      },
      pickerOptions3: {
        disabledDate(time) {
          // 禁止选择未来日期(不能选择今天)
          return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
        },
      },
      pickerOptions4: {
        disabledDate(time) {
          // 禁止选择未来日期(可以选择今天)
          return time.getTime() > Date.now()
        },
      },
    }
  },
}
</script>
上次编辑于:
本站勉强运行 小时