Skip to content

DatePicker-Default

vue
<fv-DatePicker v-model="date" >
</fv-DatePicker>

DatePicker-Simple

vue
<fv-DatePicker v-model="date"  :hideYear="true">
</fv-DatePicker>

DatePicker-Full

vue
<fv-DatePicker v-model="date" :showWeek="true">
</fv-DatePicker>

DatePicker-Disabled

vue
<fv-DatePicker v-model="date" :showWeek="true">
</fv-DatePicker>

DatePicker-Custom

vue
<fv-DatePicker 
  v-model="date" 
  :showWeek="true" 
  inputBackground="rgba(0, 90, 204, 0.6)"
  innerBorderColor="rgba(0, 90, 204, 0.1)"
  optionBackground="rgba(0, 90, 204, 0.1)"
  slideBtnBackground="rgba(29, 37, 61, 1)"
  selectedBackground="rgba(200, 200, 220, 0.9)"
  hoverColor="rgba(0, 153, 204, 0.1)"
>
</fv-DatePicker>

<style>
  .custom_style{
    background-color: rgb(0, 204, 153);
    border:1px solid rgb(0, 204, 153);
    color:white;
  }
  .custom_style:hover{
    border:1px solid rgb(0, 204, 153);
    background-color: rgb(0, 204, 153,0.8);
  }
</style>

Propoties


属性(attr)类型(type)必填(required)默认值(default)说明(statement)
v-model[Date]NoDate绑定的时间
theme['system','dark','light','custom']No'system'主题色
monthsArrayNo["January","February",...]月份显示数组
weeksArrayNo["Sun.","Mon."...]星期显示输出
hideYearBooleanNofalse是否隐藏年份
hideMonthBooleanNofalse是否隐藏月份
hideDayBooleanNofalse是否隐藏天数
showWeekBooleanNofalse是否显示星期
inputBackgroundStringNoN/A输入框背景色
innerBorderColorStringNoN/A内部边框颜色
optionBackgroundStringNoN/A选择器背景色
slideBtnBackgroundStringNoN/A滑动按钮Hover背景色
disabledBooleanNofalse是否禁用选项框
hoverColorStringNoundefined选项的Hover背景色

Events


事件名(Name)参数类型(args)说明(statement)
change当选中的时间发生变化时

MIT Licensed