条件

限制时间选择时间不能小于当前时间，并且若选择的日期大于当前日期的话，要动态取消该验证，不做此判断
开始和结束日期不能跨天
结束时间不能大于开始时间

实现效果

上代码！！！

<el-form-item label="开始时间" prop="startTime"><el-date-picker v-model="form.startTime" :popper-class="'currentDatePickerClass'" format="yyyy-MM-dd HH:mm"value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择开始时间" :editable="false":picker-options="pickerOptionsStart" @change="handleEndTime(false)" @blur="handleEndTime(false)" />
</el-form-item>
<el-form-item label="结束时间" prop="endTime"><el-date-picker v-model="form.endTime" :popper-class="'currentDatePickerClass'" format="yyyy-MM-dd HH:mm"value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择结束时间" :editable="false":disabled="form.startTime == null && form.endTime == null ?true:false" :picker-options="pickerOptionsEnd"@change="handleEndTime(true)" @blur="handleEndTime(true)" />
</el-form-item>

data()下：

// 设置开始日期
pickerOptionsStart: {disabledDate: time => {let endDateVal = this.form.endTime;if (endDateVal) {return (time.getTime() > new Date(endDateVal).getTime() || time.getTime() < new Date(endDateVal).getTime() - 86400000);} else {return time.getTime() < Date.now() - 8.64e7;}},// 限制时间selectableRange: [new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds() +' - 23:59:59'],
},
// 设置结束日期
pickerOptionsEnd: {disabledDate: time => {let beginDateVal = this.form.startTime;if (beginDateVal) {return (time.getTime() < new Date(beginDateVal).getTime() - 86400000 || time.getTime() > new Date(beginDateVal).getTime());} else {return time.getTime() < Date.now() - 8.64e7;}},// 限制时间selectableRange: [new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds() +' - 23:59:59'],
},

// 监听开始、结束时间的变化
watch: {'form.startTime': {handler(newVal, oldVal) {if (newVal != null && newVal != undefined) {// 原来的数据一直为今天，和新时间比对oldVal = Date.now();let start = new Date(oldVal);let end = new Date(newVal);// 判断是否超过一天var dateDiff = end.getDate() - start.getDate();if (dateDiff >= 1) {this.pickerOptionsStart.selectableRange = '00:00:00 - 23:59:59';} else {this.pickerOptionsStart.selectableRange = new Date().getHours() + ':' + new Date().getMinutes() + ':' +new Date().getSeconds() +' - 23:59:59'}}}},'form.endTime': {handler(newVal, oldVal) {if (newVal != null && newVal != undefined) {// 原来的数据一直为今天，和新时间比对oldVal = Date.now();let start = new Date(oldVal);let end = new Date(newVal);// 判断是否超过一天var dateDiff = end.getDate() - start.getDate();if (dateDiff >= 1) {if (this.form.startTime != null && this.form.startTime != undefined) {let startTime = new Date(this.form.startTime);this.pickerOptionsEnd.selectableRange = startTime.getHours() + ':' + startTime.getMinutes() + ':' +startTime.getSeconds() +' - 23:59:59'}} else {this.pickerOptionsEnd.selectableRange = new Date().getHours() + ':' + new Date().getMinutes() + ':' +new Date().getSeconds() +' - 23:59:59'}}}},
},

调用的函数：

// 判断结束时间
handleEndTime(obj) {if (this.form.startTime != null && this.form.endTime != null) {if (this.form.startTime >= this.form.endTime) {this.msgError("结束时间必须大于开始时间！");if (obj) {this.form.endTime = null;} else {this.form.startTime = null;}} else {let start = new Date(this.form.startTime);let end = new Date(this.form.endTime);var dateDiff = end.getDate() - start.getDate();if (dateDiff >= 1) {this.msgError("时间差不能大于一天！");if (obj) {this.form.endTime = null;} else {this.form.startTime = null;}}}}
},

Element el-date-picker组件限制选择日期/时间相关推荐

asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天
可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;...
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法如何创建一个日期对象语法:new Date(); 功能:创建一个日期时间对象 ...
java date只保留年月日_Java日期时间API系列14-----Jdk8中日期API类，日期计算1，获取年月日时分秒等...
通过Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析 ,可以看出java8设计非常好,实现接口Temporal, Tempora ...
java date加一天_Java日期时间API系列15-----Jdk8中API类，java日期计算2，年月日时分秒的加减等...
通过Java日期时间API系列8-----Jdk8中java.time包中的新的日期时间API类的LocalDate源码分析 ,可以看出java8设计非常好,实现接口Temporal, Tempora ...
php date t_细说PHP的日期时间函数date()
PHP的日期时间函数date() 1. 输出(年-月-日)格式 echo date('Y-m-j'); //2007-02-6 echo date('y-n-j');//07-2-6 大写Y表示年四位 ...
input组件选择日期时间
input获取年月日时分秒,设置最小可选日期为当前日期(type="datetime-local") <input name="deadlinetime" ...
linux-shell命令之date【显示/设置系统日期/时间】
功能说明:显示或设置系统时间与日期. 语法介绍:date [-d <字符串>][-u][+%H%I%K%l%M%P%r%s%S%T%X%Z%a%A%b%B%c%d%D%j%m%U%w%x% ...
使用date命令,进行时间戳和日期时间的互转
首先是知道时间转成时间戳 date -d "2014-01-16 12:30:11" +%s date -d "2014-01-16" +%s # 等价于201 ...
element-UI组件之日期时间选择器与时间格式转化
element-UI组件之日期时间选择器与时间格式转化日期选择器与时间选择器的一般使用日期时间选择器选择日期时间点选择日期范围日期选择器月份范围选择器禁选日期用time.getTime ...

Element el-date-picker组件限制选择日期/时间

条件

实现效果

上代码！！！

Element el-date-picker组件限制选择日期/时间相关推荐

最新文章

热门文章