最详细前端vue框架实现日期选择:结束日期必须大于开始日期的校验
最详细前端vue框架实现日期选择:结束日期必须大于开始日期的校验
·
需求
项目中经常会遇到需要选择开始和结束的时间,如果不做检验,就有可能出现结束时间小于开始时间的问题,用户体验不好。
所以要求:
当选择开始时间之后再选择结束时间,结束时间必须大于开始时间。
当选择结束时间之后再选择开始时间,开始时间必须小于结束时间。
<el-form-item label="统计日期起期" >
<el-date-picker :picker-options="pickerStartTime" v-model="filters.startTime" type="date" style="width:180px" placeholder="请选择起始日期" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="统计日期止期">
<el-date-picker :picker-options="pickerEndTime" v-model="filters.stopTime" type="date" style="width:180px" placeholder="请选择终止日期" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
computed:
用disabledDate实现开始、结束时间的禁用。
computed: {
pickerStartTime() {
let _this = this;
return {
disabledDate: time => {
if(_this.filters.stopTime){
let stopTime = _this.filters.stopTime.replace(/-/g, '/');
return time.getTime() > new Date(stopTime)
}
}
}
},
pickerEndTime() {
let _this = this;
return {
disabledDate: time => {
if(_this.filters.startTime){
let startTime = _this.filters.startTime.replace(/-/g, '/');
return time.getTime() < new Date(startTime)
}
}
}
}
},
因为value-format=“yyyy-MM-dd”,所以要用new Date格式化时间。disabledDate是自带的禁用参数。
效果
先选择结束时间,比结束时间大的就不能选
先选择开始时间,比开始时间小的就不能选
更多推荐
已为社区贡献1条内容
所有评论(0)