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