### Vue element 日期选择器 el-date-picker自定义可选范围 #### 需求：防止时间范围内的查询到数据过多，希望设置最大可选一周的是时间范围 #### 完成效果：见下图  > HTML页面 ``` el-form-item label="订单时间"> <el-date-picker v-model="formData.time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="timestamp"> </el-date-picker> </el-form-item> ``` #### 查看官方文档，disabledDate中，time.getTime() 的范围既是禁用的时间范围 > 此处为官方文档 ``` pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); }, } ``` #### 知道了怎么禁用时间，想要达到预期的效果，要拿到第一次选择的日期 #### [](#查看element文档onpick可返回每次选中的时间)查看element文档，onPick可返回每次选中的时间 ``` pickerOptions：{ disabledDate(time) { //..设置禁用状态，参数为当前日期，要求返回 Boolean let timeOptionRange = vue.timeOptionRange; let secondNum = 60*60*24*7*1000; if(timeOptionRange){ return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum ; } }, onPick(time){ //..选中日期后会执行的回调 if(time.minDate && !time.maxDate){ //..当第一时间选中才设置禁用 vue.timeOptionRange = time.minDate; } if(time.maxDate){ vue.timeOptionRange = null; } } } ``` #### 此处有个知识点，在 onPick 和 disabledDate 直接用 this 拿到的是 el-date-picker 实例 #### 查了下资料，如下可获取组件的 vue 实例 ``` data(){ var vue = this; return {} } ```