1. 程式人生 > >使用Vue設定iview元件中Datepicture外掛顯示預設日期

使用Vue設定iview元件中Datepicture外掛顯示預設日期

要實現功能的是進入該頁面,時間選擇框預設顯示當前日期及其前七天的日期時間段,也可以自己另行修改 iview的官方API中有設定start-date屬性來設定預設顯示,但是設定這個屬性只是控制的面板有顯示,選擇框並不顯示時間,如下圖所示

å¨è¿éæå¥å¾çæè¿°

我用這種辦法並沒有實現,如果有大神實現可以分享一下 在看時間選擇器的時候發現一個:value的用法,[時間選擇器] (https://www.iviewui.com/components/time-picker)可以參考此官方文件的第二案例,預設顯示時間,具體實現程式碼如下所示: 第一步:用:value繫結一個getdate陣列,用來存放開始日期和結束日期,因為我設定type是daterange就是雙面板,所以存放一個數組,如果type是date型別,可以設定為空字串型別:å¨è¿éæå¥å¾çæè¿°

第二步:定義nowTime和weekBeforeTime全域性變數來存放當前時間和從當前推遲七天的時間,即選擇框內的起始時間,最後將這兩個時間賦值給getdate即可:

此方法參看原作設定預設日期但是此作者的元件是element,和iview稍有差距,在此基礎上根據iview的元件做了修改,最終實現如下效果:

å¨è¿éæå¥å¾çæè¿°

如果有更好的方法,歡迎一起交流