問題:Element-ui中DateTimePicker設置了default-time和picker-options(時間選擇范圍)后無法選擇當天日期


一、問題描述

  在設置完default-timepicker-options兩個屬性后,當選擇當天時間時,無法選中填入時間!!

<el-date-picker
      v-model="dateTime"
      unlink-panels
      value-format="yyyy-MM-dd HH:mm:ss"
      type="daterange"
      range-separator="~"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
      :default-time="['00:00:00', '23:59:59']"
      :picker-options="pickerOptions"
    >
 </el-date-picker>

 data: () => ({
    pickerOptions: {
      disabledDate: (date) => {
        date.getTime() > Date.now() - 86400000; //通過計算此刻的時間戳限制的只能選擇此刻及以前的時間范圍
      },
    },
    dateTime: ["", ""],
  }),

二、解決方案

在查看了大神們的博客之后發現得以解決此問題!

產生原因:由於我在組件中設置 的pickerOptions屬性意為只能選擇此刻及之前的時間(這是個坑)。當選擇當天時,default-time會默認結束時間為'23:59:59',而此刻我們選擇的結束時間屬於未來(之后)的時間范圍,會與 pickerOptions屬性沖突。因此無法選擇!!需要更改disabledDate中的計算。

 注:$dateFormat是封裝好的日期格式轉換的方法,其他方式也可以實現!

pickerOptions: {
      disabledDate: (date) => {
        let time = $dateFormat(new Date(), "yyyy-MM-dd 23:59:59"); //時間日期為:當前日期 23:59:59
        return date.getTime() > new Date(time).getTime();//獲取時間戳
      },
    },

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM