element DateTimePicker不允许选择当前日期时间之前的时间

最新推荐文章于 2024-04-24 15:43:08 发布

TING沫

最新推荐文章于 2024-04-24 15:43:08 发布

阅读量1.2k

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/m0_45685758/article/details/129081314

版权

该段代码展示了一个Vue.js应用中使用el-date-picker组件的例子，用于选择日期时间。它包含一个验证规则，确保选择的日期时间必须在当前时间之后，否则会触发错误提示。此外，pickerOptions设置了disabledDate，不允许选择过去的一天。在data对象中定义了ruleForm和相关验证规则，并在methods中定义了验证方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<el-date-picker v-model="ruleForm.dateTime" 
                type="datetime" 
                placeholder="选择日期时间" 
                :picker-options="pickerOptions"></el-date-picker>

<script>
export default {
  data () {
    const validateDateTime = (vm) => {
      return (rule, value, callback) => {
        const start = new Date(vm.ruleForm.dateTime).getTime();
        if (start < Date.now()) {
          callback(new Error('定时执行时间需大于当前时间'));
        } else {
          callback();
        }
      }
    }
    return {
      ruleForm: {
        dateTime:'',
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()- 8.64e7;
        },
      },
      rules: {
        dateTime:[
          { required: true, message: "必填,请输入", trigger: "blur" },
          { validator: validateDateTime(this), trigger: "blur" }
        ],
      },
    };
 },
 methods:{}
</script>