Element UI disableddate设置动态时间,结束日期不可大于开始日期以及时间点

<!--开始日期-->
<el-form-item  label="开始日期"  prop="startDateStr">
  <el-date-picker
    v-model="startDateStr"
    :picker-options="pickerStartDate"
    type="date"
    format="yyyy-MM-dd"
    range-separator="-"
    value-format="yyyy-MM-dd"
    placeholder="开始日期">
  </el-date-picker>
</el-form-item>
​
<!--结束日期-->
<el-form-item label="结束日期" prop="endDateStr">
  <el-date-picker
    :picker-options="pickerEndDate"
    v-model="endDateStr"
    type="date"
    format="yyyy-MM-dd"
    range-separator="-"
    value-format="yyyy-MM-dd"
    placeholder="结束日期">
  </el-date-picker>
</el-form-item>
​
<!--开始时间-->
 <el-form-item  label="开始时间"  prop="startTime">
   <el-time-picker
    v-model="startTime"
    selectableRange:`00:00:00 - ${endTime ? endTime+':00' : '23:59:00'}`
    }"
    format="HH:mm"
    value-format="HH:mm"
    placeholder="开始时间">
  </el-time-picker>
</el-form-item>
​
<!--结束时间-->
 <el-form-item label="结束时间" prop="endTime">
  <el-time-picker
    format="HH:mm"
    value-format="HH:mm"
    v-model="endTime"
    placeholder="结束时间"
    :picker-options="{
    selectableRange:`${startTime ? startTime+':00' : '00:00:00'} - 23:59:00`
    }"
    >
  </el-time-picker>
</el-form-item>
data() {
  return {
    oneDayMsec: 1 * 24 * 3600 * 1000, //一天的毫秒数
    pickerStartDate: this.pickerStartDate(), 
    pickerEndDate: this.pickerEndDate(),
  }
},
methods: {
    /**开始日期可选 当天之后(包含当天)且不可大于结束日期 **/
    pickerStartDate() {
      var _this = this;
      return {
        disabledDate(time) {
          var time1 = new Date(_this.endDateStr).getTime();// 开始日期时间戳
          let a = time.getTime() <= Date.now() - 8.64e7;
          return time1 ? (a || time.getTime() > time1) : a;
        }
      }
    },  
      /**结束日期必须大于等于开始日期 且限制从当天之后(包含当天)可选**/
      pickerEndDate() {
        var _this = this;
        return {
          disabledDate(time) {
            var time1 = new Date(_this.startDateStr).getTime();// 开始日期时间戳
            let a = time.getTime() <= Date.now() - 8.64e7;
            return time1 ? (a || time.getTime() <= time1 - _this.oneDayMsec) : a;
          }
        }
      },
  }
​
​
 /**
    pickerOptions1: {
         disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;//当天之后的时间可选
            return time.getTime() > Date.now() - 8.64e7;//当天之前的时间可选
            return time.getTime() > Date.now() ;//当天之前的时间可选---不包括当天
          },
        }      
**/

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值