element 日期选择器

最新推荐文章于 2025-02-20 10:52:28 发布

前端小菜鸟__简单

最新推荐文章于 2025-02-20 10:52:28 发布

阅读量678

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_42270125/article/details/84030264

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

日期选择器开始时间大于等于当前日期小于结束日期结束时间大于等于开始时间

<el-row>
 <el-col :span="11" :offset="1">
   <el-form-item label="开始日期:" class="el_form_item" prop="startDate">
     <el-date-picker v-model="couponForm.startDate" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions" placeholder="选择日期">
     </el-date-picker>
   </el-form-item>
 </el-col>
 <el-col :span="11" :offset="1">
   <el-form-item label="结束日期:" class="el_form_item" prop="endDate">
     <el-date-picker v-model="couponForm.endDate" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptions2" placeholder="选择日期">
     </el-date-picker>
   </el-form-item>
 </el-col>
</el-row>

 couponForm: {
   startDate: '',
   endDate: '',
 },
  //开始时间大于等于今天并且小于结束时间
  pickerOptions: {
      disabledDate: time => {
        if (this.couponForm.endDate) {
          return (time.getTime() < Date.now() - 8.64e7 ||
            time.getTime() > new Date(this.couponForm.endDate).getTime()
          );
        } else {
          return time.getTime() < Date.now() - 8.64e7;
        }
      }
    },
  //结束时间小于等于开始时间可选
pickerOptions2: {
 disabledDate: time => {
   let beginDateVal = this.couponForm.startDate;
   if (beginDateVal) {
     return (
       time.getTime() <
       new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
     );
   } else {
     return time.getTime() < Date.now() - 8.64e7;
   }
 }
},