Element-plus DatePicker 日期选择器【正则校验时间范围】

最新推荐文章于 2024-05-24 11:24:23 发布

沪上啊姨

最新推荐文章于 2024-05-24 11:24:23 发布

阅读量432

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_69838795/article/details/138165363

版权

效果图：

利用element-plus中的form表单验证完成效果。

     <el-form-item label="检查计划截止日期：" prop="deadline">
            <el-date-picker
              v-model="form.deadline"
              value-format="YYYY-MM-DD"
              style="width: 100%"
              type="date"
              placeholder="请选择"
              size="small"
            />
          </el-form-item>

let rule = ref({
deadline: [
    {
      type: "date",
      required: true,
      message: "请选择计划截止日期",
      trigger: "change",
    },
    {
      trigger: "change",
      validator: (rule, value, callback) => {
        const inputDate = new Date(value);
        const maxDate = new Date('2024-04-22');  //这里可以换成变量值
        if (inputDate <= maxDate) {
          callback();
        } else {
          callback(new Error("日期不能大于2024-03-18"));
        }
      },
      message: `≤任务的结束日期（2024-04-22）`,
    },
  ],
})