element ui 中日期选择器disabledDate的几种用法

清风明月丿

已于 2023-07-06 15:25:18 修改

阅读量5.7k

点赞数 4

分类专栏： element ui 文章标签： ui vue.js javascript

于 2023-07-06 14:46:17 首次发布

本文链接：https://blog.csdn.net/hellowang02/article/details/131575982

版权

element ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用法一：

写法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();
      }
    },
}