关于 Vue.js+Element-UI 日期控件 日期范围选择
Posted karila
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 Vue.js+Element-UI 日期控件 日期范围选择相关的知识,希望对你有一定的参考价值。
理想效果 :
- 也就是说前面时间框的时间能选的范围应该小于等于后面的时间框;
- 后面时间框能选的范围应该大于等于前面的时间框;
示例代码 :
页面:
<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; } } } } }
提交:
//这个请求封装了axios api.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 日期控件 日期范围选择的主要内容,如果未能解决你的问题,请参考以下文章
element-ui日期控件el-date-picker显示的月份、日期由英文改为中文