理想效果 :
- 也就是说前面时间框的时间能选的范围应该小于等于后面的时间框;
- 后面时间框能选的范围应该大于等于前面的时间框;
示例代码 :
页面:<el-form-item label="注册日期"> ???<el-date-picker ???????????v-model="filters.column.create_start_date" ???????????type="date" ???????????:picker-options="pickerBeginDateBefore" ???????????format="yyyy-MM-dd" ???????????placeholder=""> ???</el-date-picker></el-form-item><el-form-item label="至" label-width="25px"> ???<el-date-picker ???????????v-model="filters.column.create_end_date" ???????????type="date" ???????????format="yyyy-MM-dd" ???????????:picker-options="pickerBeginDateAfter" ???????????placeholder=""> ???</el-date-picker></el-form-item>
vue:
data () { ???return { ???????filters: { ???????????column: { ???????????????create_start_date: ‘‘, ???????????????create_end_date: ‘‘ ???????????}, ???????}, ???????pickerBeginDateBefore:{ ???????????disabledDate: (time) => { ???????????????let beginDateVal = this.filters.column.create_end_date; ???????????????if (beginDateVal) { ???????????????????return time.getTime() > beginDateVal; ???????????????} ???????????} ???????}, ???????pickerBeginDateAfter:{ ???????????disabledDate: (time) => { ???????????????let beginDateVal = this.filters.column.create_start_date; ???????????????if (beginDateVal) { ???????????????????return time.getTime() < beginDateVal; ???????????????} ???????????} ???????} ???}}
提交://这个请求封装了axiosapi.request(url, data, (res)=> { ???/* ???????查询之后格式this.filters.column.create_start_date中日期发生变化; ???????Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) 变成了 "2017-08-08T16:00:00.000Z"; ???????所以使用 moment 日期格式化插件将时间转换成 [ Wed Aug 09 2017 00:00:00 GMT+0800 (中国标准时间) ] 格 ???????式; ???*/ ???/*moment 安装 npm install moment --save*/ ??if(this.filters.column.create_start_date){ ??????this.filters.column.create_start_date = ????????moment(this.filters.column.create_start_date); ???} ???if(this.filters.column.create_end_date){ ????????this.filters.column.create_end_date = ?????moment(this.filters.column.create_end_date); ???}})
原文链接：http://blog.csdn.net/qq_25386583/article/details/77044179
关于 Vue.js+Element-UI 日期控件 日期范围选择
原文地址：http://www.cnblogs.com/karila/p/7623766.html