用法一：

寫法1：可以直接在data 中定義，但是需要處理復(fù)制的，那就是需要在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="開始時(shí)間"
        />
</template>



data(){
  
  return {

            pickerOptions1: {
                               // 此時(shí)，日期選擇器  只能選擇當(dāng)前時(shí)間之前的，   
                              return time.getTime() > Date.now();
                             }
          }

}

用法二：

對于復(fù)制的邏輯，可以在methods中定義，然后在引用

<template>
           <!-- 開始時(shí)間 -->
          <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="開始時(shí)間"
            />

             <!-- 終止時(shí)間 -->
          <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="截止時(shí)間"
            />

</template>



data(){
         return{
 queryParams: {
  
        // 開始時(shí)間
        fodTimeStart: null,
        // 終止時(shí)間
        fodTimeEnd: null,
  
      },

  // 開始時(shí)間，我們設(shè)置選中的時(shí)間不允許超過當(dāng)前的時(shí)間
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },

  // 結(jié)束時(shí)間，結(jié)束時(shí)間我們選擇，是要在開始時(shí)間之前的禁用，然后，當(dāng)天以后的時(shí)間也禁用
  //  比如，開始時(shí)間我選擇周二，今天是周五，那么就是 周二到周五可以選擇，其他的禁止選擇
  //  這樣我需要拿到在data中定義的開始時(shí)間，就是要在methods來寫了


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

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

  }

}，
 // 可以在watch  做一個(gè)小小的優(yōu)化
watch: {

    // 選擇開始時(shí)間，結(jié)束時(shí)間 直接清空，用戶體檢上會更好
    "queryParams.fodTimeStart"(newVal, oldVal) {
      this.queryParams.fodTimeEnd = "";
    },
  },
methods：{
   disabledDate(time) {

       //  判斷有沒有 開始時(shí)間 ，如果沒有，直接禁用當(dāng)天之后的時(shí)間
      if (this.queryParams.fodTimeStart != null) {

        // 拿到開始選擇的時(shí)間   為什么要去掉后九位是因?yàn)槲业臅r(shí)間格式不能轉(zhuǎn)化為時(shí)間戳而做的處理
        const truncatedString = this.queryParams.fodTimeStart.slice(0, -9); // 去掉后九位字符
        //  轉(zhuǎn)化時(shí)間戳  減去86400000  是24小時(shí)的毫秒數(shù)
        const timestamp = new Date(truncatedString).getTime() - 86400000;

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

效果圖：初始選擇時(shí)間?

結(jié)束時(shí)間

?

?文章來源地址http://www.zghlxwxcb.cn/news/detail-685808.html

到了這里，關(guān)于element ui 中日期選擇器disabledDate的幾種用法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！