Skip to content

lerhxx/vue-datepicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件

DEMO

##Installation

npm install auto-calendar --save

##Usage

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

<calendar></calendar>

native

向组件传入 prop 即可改变 calendar 的样式

<caleendar theme='#800080' type='range' iconUrl='./images/icon.png'></caleendar>

demo

##Props

  • type(String): 默认 single(选择单天),可选 range(选择多天) / time(选择单天 + 时间)

  • isAbandon(Boolean): 默认 true,早于系统日期的日期选项是否不可选

  • showInput(Boolean): 默认 true,是否展示输入框

  • inputwidth: 默认“259px”,显示框的宽度

  • 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 有效

##event getValue(): 获取选中的日期

getStartTime(): 获取选中的开始日期

getEndTime(): 获取选中的结束日期