Vue.js中Element UI DatePicker如何禁用过去日期？

要实现Element UI DatePicker禁用过去日期的功能，核心是利用组件的disabled-date属性，该属性接收一个自定义函数来判断哪些日期需要被禁用。

实现步骤 #

• 给el-date-picker组件绑定:disabled-date属性，指向一个判断方法
• 在判断方法中，对比目标日期与当前日期的起始时间，返回true则禁用该日期

完整代码示例 #

模板部分

<el-date-picker
  v-model="form.startDate"
  type="date"
  placeholder="Tarih Seçiniz."
  style="width: 100%"
  :disabled-date="disabledPastDate"
/>

脚本部分（Vue 2）

export default {
  data() {
    return {
      form: {
        startDate: ''
      }
    };
  },
  methods: {
    disabledPastDate(date) {
      // 获取今天0点0分0秒的时间戳
      const todayStart = new Date().setHours(0, 0, 0, 0);
      // 若传入日期早于今天0点，则禁用
      return date.getTime() < todayStart;
    }
  }
};

额外说明 #

• 上述代码允许选择今天及以后的日期，如果需要禁用今天（仅允许选择明天及以后），只需将判断条件改为：

  return date.getTime() <= todayStart;
  

• disabled-date函数的date参数是当前被校验的日期对象，通过对比时间戳可以精准控制禁用范围。

内容的提问来源于stack exchange，提问作者Bedirhan Ateş