关于 Vue.js+Element-UI 日期控件 日期范围选择

理想效果 :

---

---

1. 也就是说前面时间框的时间能选的范围应该小于等于后面的时间框;
2. 后面时间框能选的范围应该大于等于前面的时间框;

---

示例代码 :

页面:

<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);    }})

---

传送门 :

Element-UI 官网 : http://element.eleme.io

vue 官网 : https://cn.vuejs.org/

moment日期转换插件中文官网 : http://momentjs.cn/