一、問題描述
在設置完default-time
及picker-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();//獲取時間戳 }, },