Datepicker

<sw-datepicker>

ready
Datepicker wrapper for date inputs. For all configuration options visit: https://flatpickr.js.org/options/. Be careful when changing the config object. To add a parameter to the config at runtime use: https://vuejs.org/v2/api/#Vue-set. this.$set(this.myDatepickerConfig, 'dateFormat', 'd.m.y');

Usage

Loading...
<sw-datepicker
     dateType="date"
     label="SW-Field Date"
     size="default"
     value="12.10.2019">
</sw-datepicker>

Component properties

Property name Type Default
value String
config Object
dateType String date
required Boolean false

Methods

Method name Parameters
createdComponent No parameters
mountedComponent No parameters
beforeDestroyComponent No parameters
setDatepickerValue value
getMergedConfig newConfig
updateFlatpickrInstance No parameters
createFlatpickrInstance No parameters
getEventNames No parameters
openDatepicker No parameters
kebabToCamel string
unsetValue No parameters
emitValue value
createConfig No parameters

Imports

  • flatpickr
  • flatpickr/dist/l10n
  • ./sw-datepicker.html.twig
  • flatpickr/dist/flatpickr.css
  • ./sw-datepicker.scss

Watcher

  • config
  • dateType
  • locale
  • value

Mixins

  • sw-form-field

SASS variables

Variable name Value
$sw-datepicker-color-border $color-steam-cloud ($color-gray-300)
$sw-datepicker-color-font $color-gutenberg ($color-darkgray-200)
$sw-datepicker-color-disabled-font #B3BFCC
$sw-datepicker-color-hover #e6e6e6
$sw-datepicker-color-selected $color-shopware-blue ($color-shopware-brand-500)
$sw-datepicker-color-text-selected $color-white (#FFF)

Twig blocks

  • sw_datepicker