Migrate to flatpicker

2018-09-14 09:54:48 +02:00
parent d104cad8a4
commit 131279b120
11 changed files with 25 additions and 34 deletions
@@ -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",
@@ -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",
@@ -1,5 +1,4 @@
 <script>
-    import Vue from 'vue'
    import $ from 'jquery'

    import StepInput from './StepInput.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({
-                        autoHide: true,
-                        language: 'de-DE',
-                        format: 'dd.mm.yy',
-                        weekStart: 1,
-                        days: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
-                        daysShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-                        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);
+                    this.picker = $(this.$refs.field).flatpickr({
+                        dateFormat: 'd.m.Y',
+                        locale: German,
+                        onChange: (selectedDates) => {
+                            if (selectedDates.length) {
+                                this.date = selectedDates[0];
+                                this.$emit('picked', { field: this.name, value: dayjs(this.date).format('DD.MM.YYYY') });
+                            }
+                        }
                    });
+                    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 () {
@@ -2,13 +2,13 @@
    <div class="daterange-input">
        <date-input class="daterange-input__field"
                    name="from" placeholder="von"
-                    v-bind:default-date="defaultDateFrom"
-                    v-on:picked="updateRange"></date-input>
+                    :default-date="defaultDateFrom"
+                    @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"
-                    v-on:picked="updateRange"></date-input>
+                    :default-date="defaultDateTo"
+                    @picked="updateRange"></date-input>
    </div>
 </template>
 <script>
@@ -1,6 +1,5 @@
 <script>
    const $ = require('jquery');
-    const Vue = require('vue');

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

    export default {
        props: {
@@ -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');
@@ -1,5 +1,3 @@
-@import "~@fengyuanchen/datepicker/dist/datepicker.css";
-
 .configurator {
    background: url(../images/bg_configurator.jpg) no-repeat top left;
    background-size: cover;
@@ -0,0 +1,3 @@
+.flatpickr-months .flatpickr-month {
+  height: 40px;
+}
@@ -37,3 +37,4 @@ $output-bourbon-deprecation-warnings: false;
@import "search";
@import "paginator";
@import "news";
+@import "datepicker";