Migrate to flatpicker

package-lock.json

@@ -9,11 +9,6 @@
       "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.3.5.tgz",
       "integrity": "sha512-/sO9o/zeQhWN1OMRlVOWpElN56Ww/aSNks5a7PZ7JKM6I5jeih6CxaCeeOp8jgJXVfElbWOO2KTAMT/7tICNcQ=="
     },
-    "@fengyuanchen/datepicker": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/@fengyuanchen/datepicker/-/datepicker-0.6.5.tgz",
-      "integrity": "sha512-+HwjRUBilmoG+SnhQbbInsBSyvRMRUBZMX2hbHuqonYmp+zY70U9HrHU1TAqrMFjZ0JwoAiGQbQ65H4zKtmLvQ=="
-    },
     "@symfony/webpack-encore": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@symfony/webpack-encore/-/webpack-encore-0.19.0.tgz",

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@fancyapps/fancybox": "^3.2.5",
-    "@fengyuanchen/datepicker": "^0.6.5",
     "bootstrap-sass": "^3.3.7",
     "bourbon": "^4.3.2",
     "cookieconsent": "^3.1.0",

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/Configurator.vue

@@ -1,5 +1,4 @@
 <script>
-    import Vue from 'vue'
     import $ from 'jquery'
 
     import StepInput from './StepInput.vue'

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateInput.vue

@@ -6,7 +6,9 @@
 <script>
     import $ from 'jquery'
     import Vue from 'vue'
-    import datepicker from '@fengyuanchen/datepicker'
+    import dayjs from 'dayjs'
+    import flatpickr from 'flatpickr'
+    import { German } from 'flatpickr/dist/l10n/de'
 
     export default {
         props: {
@@ -24,28 +26,26 @@
         },
         data () {
             return {
+                picker: null,
                 date: null
             }
         },
         methods: {
             initPicker () {
-                let $field = $(this.$refs.field);
                 Vue.nextTick(() => {
-                    $field.datepicker({
+                    this.picker = $(this.$refs.field).flatpickr({
-                        autoHide: true,
+                        dateFormat: 'd.m.Y',
-                        language: 'de-DE',
+                        locale: German,
-                        format: 'dd.mm.yy',
+                        onChange: (selectedDates) => {
-                        weekStart: 1,
+                            if (selectedDates.length) {
-                        days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+                                this.date = selectedDates[0];
-                        daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+                                this.$emit('picked', { field: this.name, value: dayjs(this.date).format('DD.MM.YYYY') });
-                        daysMin: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+                            }
-                        months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
+                        }
-                            'Oktober', 'November', 'Dezember'],
-                        monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov',
-                            'Dez'],
-                    }).on('pick.datepicker', (event) => {
-                        this.date = $field.datepicker('formatDate', event.date);
                     });
+                    if (this.defaultDate) {
+                        this.picker.setDate(new Date(this.defaultDate));
+                    }
                 });
             }
         },
@@ -54,9 +54,6 @@
                 if (value) {
                     this.date = value;
                 }
-            },
-            date (value) {
-                this.$emit('picked', { field: this.name, value: value });
             }
         },
         mounted () {

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/DateRangeInput.vue

@@ -2,13 +2,13 @@
     <div class="daterange-input">
         <date-input class="daterange-input__field"
                     name="from" placeholder="von"
-                    v-bind:default-date="defaultDateFrom"
+                    :default-date="defaultDateFrom"
-                    v-on:picked="updateRange"></date-input>
+                    @picked="updateRange"></date-input>
         <span class="daterange-input__divider">-</span>
         <date-input class="daterange-input__field"
                     name="to" placeholder="bis"
-                    v-bind:default-date="defaultDateTo"
+                    :default-date="defaultDateTo"
-                    v-on:picked="updateRange"></date-input>
+                    @picked="updateRange"></date-input>
     </div>
 </template>
 <script>

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/InquiryForm.vue

@@ -1,6 +1,5 @@
 <script>
     const $ = require('jquery');
-    const Vue = require('vue');
 
     require('../../images/spinner_box.gif');
     require('../../images/spinner_default.gif');

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/components/StepInput.vue

@@ -11,7 +11,6 @@
 </template>
 <script>
     const $ = require('jquery');
-    const Vue = require('vue');
 
     export default {
         props: {

web/typo3conf/ext/ep_events/Resources/Private/Assets/js/main.js

@@ -7,6 +7,7 @@ require.context('../images', true, /\.(png|gif|svg|ico)$/);
 require('normalize.css/normalize.css');
 require('slick-carousel/slick/slick.css');
 require('cookieconsent/build/cookieconsent.min.css');
+require('flatpickr/dist/flatpickr.css');
 
 // Require main app
 require('./app');

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_configurator.scss

@@ -1,5 +1,3 @@
-@import "~@fengyuanchen/datepicker/dist/datepicker.css";
-
 .configurator {
     background: url(../images/bg_configurator.jpg) no-repeat top left;
     background-size: cover;

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_datepicker.scss

@@ -0,0 +1,3 @@
+.flatpickr-months .flatpickr-month {
+  height: 40px;
+}

web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/main.scss

@@ -37,3 +37,4 @@ $output-bourbon-deprecation-warnings: false;
 @import "search";
 @import "paginator";
 @import "news";
+@import "datepicker";