Datepicker

GITHUB

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:

Default

Jalaali Date

Custom Template

Disabled

Required

Select day from September

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:

NameTypeDefaultDescription
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.