Datepicker

To create full featured multi language datepicker element use this component.

Code:

  
    HTML
    
  
  <fvDatepicker v-model="input" />

  
    Javascript
    
  
  export default {
    data () {
        return {
            input: undefined
        }
    }
}

Examples:

Normal

Default

Custom Date Library (Jalaali date, using IDate library)

Jalaali Date

Custom Template

Custom Template

Disabled

Disabled

Required

Required

Custom Required (Date Range)

Select day from September

Sizes

XLarge size

Large size

Medium size

Small size

XSmall size

Notes:

The display css prop of input is inline-flex, so do not change it to block or ... for custom styles.
You can globally set the dateLibrary prop by setting by Framevuerk.use('date', Date).
Input value can be any types that allow by Date Library as first argument. All output value is Date Library constructor.
For jalaali dates, we highly propose idate npm package.

API:

Name	Type	Default	Description
value*	---	---	Value of input
required	Boolean or Function	false	Does input required to fill? Also with function type you can pass function with one argument (fn(value){}) and return Boolean value.
disabled	Boolean	false	Does input disabled?
placeholder	String	''	Placeholder text. (when no option selected)
multiple	Boolean	false	Allow user to select multiple options.
deleteButton	Boolean	true	Show delete button next to selected values.
dateLibrary	Object or Function	---	Custom Date library instead of default javascript Date class.
defaultValue	---	Date.now()	Default highlighted date.

Name	Params	Description
input	newValue	Fired when component request to change value.

Name	Params	Description
value	value	Template for value inside input.

Name	Description
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size