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
vue
<DatepickerWrapper :value="value" ... />

The value that you would regularly pass to v-model.

options

  • Type: object
  • Required: true
vue
<DatepickerWrapper :options="{ ... }" ... />

Additional options for flatpickr. It can be used if the flatpickr has any properties that Vueform has not implemented yet.

id

  • Type: number|string
  • Required: true
vue
<DatepickerWrapperElement id="datepicker-id" ... />

Sets the id attribute of datepicker input.

attrs

  • Type: object
  • Default: {}
vue
<DatepickerWrapperElement :attrs="{ autofocus: true }" ... />

Assigns HTML attributes to the container / input field.

placeholder

  • Type: number|string
vue
<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

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.

👋 Hire Vueform team for form customizations and developmentLearn more