vue 插件案例

vue element ui 开始日期小于或等于结束日期

2020-08-05  本文已影响0人  web30
需求:

选择下单开始日期后,结束日期只能选择大于或等于当前下单日期,然后当前选择的结束日期之前的日期都不能再选择了,然后更改选择好的下单日期时,是不能大于当前选中的结束日期的

效果图:
image.png image.png
代码:
<el-form :inline="true" :model="formUser" class="form_input">
  <el-form-item label="下单时间">
          <el-date-picker
            v-model="formUser.orderStart_Date" 
            value-format="yyyy-MM-dd"  // 把组件里默认的中国标准时间格式化为 年-月-日
            type="date"
            placeholder="选择开始日期"
            :picker-options="orderStartDate"
            size="medium">
          </el-date-picker>
          <span> - </span>
          <el-date-picker
            v-model="formUser.orderEnd_Date"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择结束日期"
            :picker-options="orderEndDate"
            size="medium">
          </el-date-picker>
        </el-form-item>
</el-form>
export default{
  data(){
    return{
      formUser: {
        orderStart_Date: '', // 下单开始时间
        orderEnd_Date: '', // 下单结束时间
      },
     // 下单开始日期小于结束日期
      orderStartDate: {
        disabledDate: (time) => {
          if (this.formUser.orderEnd_Date) {
            return time.getTime() > new Date(this.formUser.orderEnd_Date).getTime();
          }
        },
      },
      orderEndDate: {
        disabledDate: (time) => {
          if (this.formUser.orderStart_Date) {
            // 减掉86400000秒(一天)目的是把当前选中的下单日期包含在内可以选择,也就是说在选择结束日期时,可以选择当前下单日期
            return time.getTime() < new Date(this.formUser.orderStart_Date).getTime() - 86400000;  
          }
        },
      },
    }
  }
}
上一篇 下一篇

猜你喜欢

热点阅读