Element-UI 日期范围 date-picke

时间：2022-06-13 18:09:40

实际项目应用案例：

         <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 

          }
        }
      }
    }
  },

  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

 

 

标签：

相关文章