element ui 中日期选择器disabledDate的几种用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 中日期选择器disabledDate的几种用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

用法一：

写法1：可以直接在data 中定义，但是需要处理复制的，那就是需要在methods中定义的

<template>
    <el-date-picker
        v-model="queryParams.fodTimeStart"
        value-format="yyyy-MM-dd-HH-mm-ss"
        type="datetime"
        size="mini"
        prefix-icon="el-icon-date"
        :picker-options="pickerOptions1"
        placeholder="开始时间"
        />
</template>



data(){
  
  return {

            pickerOptions1: {
                               // 此时，日期选择器  只能选择当前时间之前的，   
                              return time.getTime() > Date.now();
                             }
          }

}

用法二：

对于复制的逻辑，可以在methods中定义，然后在引用

<template>
           <!-- 开始时间 -->
          <el-date-picker
              v-model="queryParams.fodTimeStart"
              value-format="yyyy-MM-dd-HH-mm-ss"
              type="datetime"
              size="mini"
              prefix-icon="el-icon-date"
              :picker-options="pickerOptions1"
              placeholder="开始时间"
            />

             <!-- 终止时间 -->
          <el-date-picker
              v-model="queryParams.fodTimeEnd"
              value-format="yyyy-MM-dd-HH-mm-ss"
              type="datetime"
              size="mini"
              prefix-icon="el-icon-date"
              :picker-options="pickerOptions2"
              placeholder="截止时间"
            />

</template>



data(){
         return{
 queryParams: {
  
        // 开始时间
        fodTimeStart: null,
        // 终止时间
        fodTimeEnd: null,
  
      },

  // 开始时间，我们设置选中的时间不允许超过当前的时间
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

  // 结束时间，结束时间我们选择，是要在开始时间之前的禁用，然后，当天以后的时间也禁用
  //  比如，开始时间我选择周二，今天是周五，那么就是 周二到周五可以选择，其他的禁止选择
  //  这样我需要拿到在data中定义的开始时间，就是要在methods来写了


  // pickerOptions3 是在上面模板中定义的
     pickerOptions3: {

  // this.disabledDate2 是在methods中定义的
        disabledDate: this.disabledDate2,
      },

  }

}，
 // 可以在watch  做一个小小的优化
watch: {

    // 选择开始时间，结束时间 直接清空，用户体检上会更好
    "queryParams.fodTimeStart"(newVal, oldVal) {
      this.queryParams.fodTimeEnd = "";
    },
  },
methods：{
   disabledDate(time) {

       //  判断有没有 开始时间 ，如果没有，直接禁用当天之后的时间
      if (this.queryParams.fodTimeStart != null) {

        // 拿到开始选择的时间   为什么要去掉后九位是因为我的时间格式不能转化为时间戳而做的处理
        const truncatedString = this.queryParams.fodTimeStart.slice(0, -9); // 去掉后九位字符
        //  转化时间戳  减去86400000  是24小时的毫秒数
        const timestamp = new Date(truncatedString).getTime() - 86400000;

        //  做出判断
        return time.getTime() < timestamp || time.getTime() > Date.now();
      } else {
        return time.getTime() > Date.now();
      }
    },
}