vue element结束时间不能小于开始时间

html:

 <li>
          <span>到达时间:</span>
          <el-date-picker
            v-model="arr_time"
            type="datetime"
            style="width: 15vw;"
            size="small"
            :picker-options="startDatePicker"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </li>
        <li>
          <span>结束时间:</span>
          <el-date-picker
            v-model="leave_time"
            type="datetime"
            size="small"
            style="width: 15vw;"
            :picker-options="endDatePicker"
            default-time="14:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </li>

data方法设置startDatePicker,endDatePicker:

 data(){
      return{
       startDatePicker: this.beginDate(),
        endDatePicker: this.processDate(),
        arr_time:this.getTime(),//开始时间获取现在的时间
      }

js

 //这里是控制结束日期不能小于开始日期
      beginDate(){
        const self = this
        return {
          disabledDate(time){
            if (self.leave_time) {  //如果结束时间不为空,则小于结束时间
              return new Date(self.leave_time).getTime() < time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
            }
          }
        }
      },
      processDate() {
        const  self = this
        return {
          disabledDate(time) {
            if (self.arr_time) {  //如果开始时间不为空,则结束时间大于开始时间
              return new Date(self.arr_time).getTime() > time.getTime()
            } else {
              // return time.getTime() > Date.now()//开始时间不选时,结束时间最大值小于等于当天
            }
          }
        }
      },
     
     //获取现在的时间
      getTime(){
        var _this = this;
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth()+1;
        let dd = new Date().getDate();
        let hh = new Date().getHours();
        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
        let time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
        return time
      },

结束时间可以等于或者大于开始时间

 <el-form-item label="抵达时间" prop="arr_time">
        <el-date-picker
          v-model="form.arr_time"
          type="datetime"
          style="width:100%"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptionsStart"
          @change="getroomTypeList,getDays()"
        />
      </el-form-item>
      <el-form-item label="离开时间" prop="leave_time">
        <el-date-picker
          v-model="form.leave_time"
          type="datetime"
          style="width:100%"
          placeholder="选择日期时间"
          :picker-options="pickerOptionsEnd"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="getroomTypeList(),getDays()"
        />
      </el-form-item>

 data(){
  return{
      pickerOptionsStart: {
        disabledDate: time => {
          const delay = this.form.leave_time
          if (delay) {
            return time.getTime() < new Date(delay).getTime() - 24 * 60 * 60 * 1000 // 当天也可以
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          const delay = this.form.arr_time
          if (delay) {
            // const dd = new Date('2019-09-03').getTime();//9月3号
            // return time.getTime() < dd;
            return time.getTime() < new Date(delay).getTime() - 24 * 60 * 60 * 1000 // 当天也可以
          }
        }
      } // 结束时间
  }
 }





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值