vue2和vue3在使用element-ui日期选择框中禁用日期的实现

vue2中饿了么的日期禁用

上了先上个官方文档，可以看见vue2的disabledDate是在picker-options里面的。

因为vue2的写法应该把disabledDate写在:picker-options里面，可以使用这种写法。

 <el-form-item label="预计收货时间" prop="estimatedDate" required>
                <el-date-picker
                  v-model="formData.estimatedDate"
                  type="datetime"
                  :picker-options="{disabledDate}"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                />
</el-form-item>

把方法写在methods里面

<script>
methods: {
    disabledDate(time) { // 禁用今天之前的时间
      return time.getTime() < new Date() - 8.64e7
    }
}
</script>

实现效果图：

vue3中饿了么的日期禁用

vue3的文档有点变化，这个disabledDate被提到外面来了。

例子：

 <el-form-item label="质押期限" prop="startDate" required>
                <el-date-picker
                  type = 'daterange' 
                  v-model:start="params.startDate" 
                  v-model:end="params.endDate"
                  :disabledDate="disabledDate"
                />
</el-form-item>

把方法写在methods里面

<script>
methods: {
    disabledDate(time) { // 禁用今天之前的时间
      return time.getTime() < new Date() - 8.64e7
    }
}
</script>

其实跟vue2上面差不多，就是:disabledDate可以直接用了。不需要再写到:picker-options里面。效果是一样的。