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>

Properties ​


PropertyTypeRequiredDefaultDescription
modelValueDateNo() => new Date()See the DatePicker modelValue option.
themestringNo'global'Theme color.
monthsarrayNo[ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]See the DatePicker months option.
weeksarrayNo['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.']See the DatePicker weeks option.
hideYearbooleanNofalseSee the DatePicker hideYear option.
hideMonthbooleanNofalseSee the DatePicker hideMonth option.
hideDaybooleanNofalseSee the DatePicker hideDay option.
showWeekbooleanNofalseSee the DatePicker showWeek option.
inputBackgroundstringNo''See the DatePicker inputBackground option.
innerBorderColorstringNo'rgba(200, 200, 200, 0.3)'See the DatePicker innerBorderColor option.
optionBackgroundstringNo''See the DatePicker optionBackground option.
slideBtnBackgroundstringNo''See the DatePicker slideBtnBackground option.
disabledbooleanNofalseSee the DatePicker disabled option.
hoverColorstringNoundefinedSee the DatePicker hoverColor option.
selectedBackgroundstringNo''See the DatePicker selectedBackground option.
reverseLayoutbooleanNofalseSee the DatePicker reverseLayout option.
langstringNo"global"See the DatePicker lang option.

Events ​


EventArgumentsDescription
changeSee the component change option.

MIT Licensed