vue自定義日期組件

vue-datepicker

基於 vuejs 2.x 可自定義主題的日期組件

github

DEMO

Installation

npm install auto-calendar --save

Usage

只需要在項目中加入 calendar.vue，就可以使用了。

 

 

 

向組件傳入 prop 即可改變 calendar 的樣式

 

 

 

 

Props

• type(String): 默認 single（選擇單天），可選 range（選擇多天） / time（選擇單天 + 時間）

• isAbandon(Boolean): 默認 true，早於系統日期的日期選項是否不可選

• showInput(Boolean): 默認 true，是否展示輸入框

• theme(String): 默認 #e57373，主題色

• themepannelbg(String): 默認 #fff，pannel 背景顏色

• themeheadercolor(String): 默認 #fff，pannel 頭部字體顏色

• themeheaderyear(String): 默認為空，pannel 頭部年份字體顏色，為空則跟隨 themeheadercolor 值

• themeheadermonth(String): 默認為空，pannel 頭部月份字體顏色，為空則跟隨 themeheadercolor 值

• themeheadersep(String): 默認為空，pannel 頭部“/”字體顏色，為空則跟隨 themeheadercolor 值

• themeleftarrow(String): 默認為空，pannel 頭部左箭頭顏色，為空則跟隨 themeheadercolor 值

• themerightarrow(String): 默認為空，pannel 頭部右箭頭顏色，為空則跟隨 themeheadercolor 值

• themeheaderbg(String): 默認為空，pannel 頭部背景顏色，為空則跟隨 theme 值

• themeweekcolor(String): 默認為空，星期字體顏色，為空則跟隨 theme 值

• themeborder(String): 默認為空，底部邊框，為空則 color 跟隨 theme 值, width = 1px, style = solid

• themeselbg(String): 默認為空，選中日期背景顏色，為空則跟隨 theme 值

• themeselcolor(String): 默認 #fff，選中日期字體顏色

• themebtnborder(String): 默認為空，按鈕邊框顏色，為空則跟隨 theme 值

• themebtnconbg(String): 默認為空，確認按鈕背景顏色，為空則跟隨 theme 值

• themebtncanbg(String): 默認 #fff，取消按鈕背景顏色

• themebtnconfirmcolor(String): 默認 #fff，確認按鈕字體顏色

• themebtncanclecolor(String): 默認 #000，取消按鈕字體顏色

• themecurmonthcolor(String): 默認 #000，當前月份日期的字體顏色

• themeprevmonthcolor(String): 默認 #aaa，上月日期的字體顏色

• themenextmonthcolor(String): 默認 #aaa，下月份日期的字體顏色

• themenotallowcolor(String): 默認 #aaa，無效日期的字體顏色，僅 isAbandon 為 true 有效