理想效果 :
示例代码 :
页面:
<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 日期控件 日期范围选择
原文:http://www.cnblogs.com/karila/p/7623766.html