DatepickerWrapper
A Vue.js wrapper for flatpickr.
Serves as a wrapper for flatpickr library. Used by DateElement and DatesElement components. You can reach its component instance, properties and methods via DateElement or DatesElements's input property.
Options
Find below the list of options that can use to configure DatepickerWrapper component. Options can be passed to the component via props.
value
- Type:
any - Required:
true
<DatepickerWrapper :value="value" ... />The value that you would regularly pass to v-model.
options
- Type:
object - Required:
true
<DatepickerWrapper :options="{ ... }" ... />Additional options for flatpickr. It can be used if the flatpickr has any properties that Vueform has not implemented yet.
autocomplete
- Type:
string|number
<DatepickerWrapperElement autocomplete="off" ... />Sets the autocomplete attribute of the input field.
id
- Type:
number|string - Required:
true
<DatepickerWrapperElement id="datepicker-id" ... />Sets the id attribute of datepicker input.
attrs
- Type:
object - Default:
{}
<DatepickerWrapperElement :attrs="{ autofocus: true }" ... />Assigns HTML attributes to the container / input field.
placeholder
- Type:
number|string
<DatepickerWrapper placeholder="Placeholder" ... />Sets the placeholder attribute of the datepicker input.
Properties
All the data, computed and inject properties of the component.
datepicker$
- Type:
object - Default:
null - Group:
data
The flatpickr instance.
config
- Type:
object - Group:
computed
The flatpickr configuration object. Can be extended via options with flatpickr options.
mode
- Type:
string - Group:
computed
The current options.mode.
input
- Type:
HTMLElement - Group:
data
The date input DOM element.
Size
- Type:
string - Group:
inject
The size of the component.
View
- Type:
string - Group:
computed
The name of the resolved view for the component. This one should be used to determine the component's view in class functions.
template
- Type:
object - Group:
computed
The component's template.
classes
- Type:
object - Group:
computed
The component's classes.
theme
- Type:
object - Group:
inject
The global theme object, which contains all the default templates and classes.
form$
- Type:
Vueform - Group:
inject
The root form's component.
el$
- Type:
VueformElement - Group:
inject
The parent element's component.
Events
Events emitted by the component.
change
- Params:
{string} newValue- the new value{string} oldValue- the old value{component} el$- the element's component
Triggered when the element's value is changed.
