Element-UI 日期范围 date-picke

实际项目应用案例：

?

        <el-form-item label="开始日期：" prop="StartDate">

         <el-date-picker

           v-model="temp.StartDate"

           :clearable="false"

           :picker-options="pickerOptions0"

           type="date"

           style="width:50%"

           format="yyyy-MM-dd"

           value-format="yyyy-MM-dd"

           placeholder="请选择日期"/>

       </el-form-item>

 

       <el-form-item label="计划结束日期：" prop="EndDate">

         <el-date-picker

           v-model="temp.EndDate"

           :clearable="false"

           :picker-options="pickerOptions1"

           type="date"

           style="width:50%"

           format="yyyy-MM-dd"

           value-format="yyyy-MM-dd"

           placeholder="选择日期"/>

       </el-form-item>

 

       <el-form-item v-if="temp.HasSubmitted" label="实际结束日期：" prop="RealEndDate">

         <el-date-picker

           v-model="temp.RealEndDate"

           :picker-options="realEndDatePickerOptions"

           type="date"

           format="yyyy-MM-dd"

           value-format="yyyy-MM-dd"

           placeholder="选择日期"/>

       </el-form-item>

 

 

 

data() {

   return {

     formFilter: {

       StartDate: null, // 数据库返回时间格式为： YYYY-MM-dd ，2018-11-11

       EndDate: null,

 

     },

 

     realEndDatePickerOptions: {

       disabledDate: (time) => {

         if (this.beginDate) {

           return time.getTime() > Date.now() || time.getTime() < this.beginDate

         }

       }

     },

 

     pickerOptions0: {

       disabledDate: (time) => {

         if (this.beginDate && this.endDate) {

           return time.getTime() < this.beginDate || time.getTime() >= this.endDate

         }

       }

     },

     pickerOptions1: {

       disabledDate: (time) => {

         if (this.beginDate && this.endDate) {

           return time.getTime() >= this.endDate || time.getTime() < this.beginDate <br>

         }

       }

     }

   }

 },

 

 computed: {

   beginDate() {

     return new Date(this.formFilter.StartDate).getTime() - 24 * 3600 * 1000

   },

   endDate() {

     return new Date(this.formFilter.EndDate).getTime()

   }

 },

一、前提条件：数据库返回时间格式为： YYYY-MM-dd ，例如：2018-11-11

二、重点： 

1通过Date（“YYYY-MM-dd ”）.getTime() 转换为时间戳格式，然后比较大小。

2找到date-picker时间组件的方法：disabledDate 

3 时间戳格式，减去一日就是减去一日对应的毫秒数：24 * 3600 * 1000

三、缺点：date-picker时间组件通过遍历disabledDate方法来控制日期可选和不可选，有一定的性能损失，不过测试可以接受。建议将需要计算的步骤转移到计算属性computed中进行，保持disabledDate最简化。

四、可能的性能替代方案： onchange事件中判断范围，弹出提示信息，但这种提示不够智能、友好。 

提示语句案例：

this.$notify({

　　title: '提示',

　　message: '日期超出计划开始和结束范围!',

　　type: 'warning',

　　duration: 3000

})

五、element文档：http://element-cn.eleme.io/#/zh-CN/component/date-picker

六：可能的错误：

报错：disabledDate (time) {} 

改为：disabledDate: (time) =>{}

错误  return time.getTime() >= this.endDate || time.getTime() < this.beginDate

改为：if (this.beginDate && this.endDate) {  return time.getTime() >= this.endDate || time.getTime() < this.beginDate }

//必须加if条件，建议将容易返回true的判断条件放在前面，减少判断时间。

----------------------------------------------------------------------------------------------------------------------------

参考过的文档：https://blog.csdn.net/qq_25386583/article/details/77044179