element 两个日期选择器组成日期范围选择器

最新推荐文章于 2024-08-05 15:02:24 发布

阿铭同学

最新推荐文章于 2024-08-05 15:02:24 发布

阅读量654

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ACHHC/article/details/122195580

版权

这段代码展示了如何在Vue中使用el-date-picker组件设置规则，确保规则开始时间不晚于今天且不早于结束时间，同时结束时间不早于开始时间。禁用日期的选择范围受到开始和结束日期的相互制约，提供了一种前后日期关联验证的实现方式。

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

<el-row>
 <el-col>
    <el-form-item label="规则开始时间" prop="begindate">
      <el-date-picker
        v-model="form1.begindate"
        type="date"
        placeholder="请选择规则开始时间"
        style="width: 400px"
        size="small"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions0"
      >
      </el-date-picker>
    </el-form-item>
  </el-col>
  <el-col>
    <el-form-item label="规则结束时间" prop="enddate">
      <el-date-picker
        v-model="form1.enddate"
        type="date"
        placeholder="请选择规则结束时间"
        style="width: 400px"
        size="small"
        value-format="yyyy-MM-dd"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
    </el-form-item>
  </el-col>
</el-row>

return {
// 规则开始日期
   pickerOptions0: {
     disabledDate(time) {
       if (that.form1.enddate) {
         return (
           // 不得大于结束日期
           time.getTime() > new Date(that.form1.enddate).getTime() ||
           time.getTime() < Date.now() - 8.64e7
         );
       } else {
         return time.getTime() < Date.now() - 8.64e7; //不得早于今天
       }
     },
   },
   // 规则结束日期
   pickerOptions1: {
     disabledDate(time) {
       if (that.form1.begindate) {
         return (
           time.getTime() < new Date(that.form1.begindate).getTime() - 8.64e7
         );
       } else {
         return time.getTime() < Date.now() - 8.64e7;
       }
     },
   },
}