vue element-ui DateTimePicker日期时间选择器之开始时间小于结束时间的设置

vue element-ui DateTimePicker日期时间选择器之开始时间小于结束时间的设置

Html:

<el-form-item required label="开始时间">
  <el-date-picker
    type="datetime"
    placeholder="开始日期"
    :picker-options="startTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    default-time="00:00:00"
    v-model="swiperAddForm.startTime"
  ></el-date-picker>
</el-form-item>
<el-form-item required label="结束时间">
  <el-date-picker
    type="datetime"
    placeholder="结束日期"
    :picker-options="endTime"
    value-format='yyyy-MM-dd HH:mm:ss'
    default-time="23:59:59"
    v-model="swiperAddForm.endTime"
  ></el-date-picker>
</el-form-item>

js:

data() {
	return {
		swiperAddForm: {
			startTime: "",
			endTime: ""
		},
		startTime: {
	       disabledDate: time => {
	          if (this.swiperAddForm.endTime) {
	          	// 设置开始时间大于结束时间
	            return time.getTime() > new Date(this.swiperAddForm.endTime).getTime() || time.getTime() < Date.now()
	          } else {
	          	// 设置开始时间小于当前时间
	            return time.getTime() < Date.now()
	          }
	       }
		},
      	// 结束时间大于开始时间
      	endTime: {
	        disabledDate: time => {
	          if (this.swiperAddForm.startTime) {
	            return time.getTime() < new Date(this.swiperAddForm.startTime).getTime() + 86400000
	          } else {
	            return time.getTime() < Date.now()
	          }
	        }
    	}
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值