datePicker.vue

<template>
    <datepicker
            :startDate="startDate"
            @checkInChanged="setCheckinDate"
            :maxNights="30"
            :disabledDates="bookedDates"
            :firstDayOfWeek="1"
            :i18n="lang"
            :showYear="true"
    >

    </datepicker>
</template>

<script>
    import datepicker from 'vue-hotel-datepicker';
    import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

    const routes = require('../fos_js_routes.json');
    Routing.setRoutingData(routes);

    export default {
        components: {
            datepicker
        },
        data() {
            return {
                bookedDates: [],
                startDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 14),
                maxDate: 0,
                minNights: 5, //4 + 1 for rendering
                lang: {
                    night: 'Night',
                    nights: 'Nights',
                    'day-names': ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
                    'check-in': 'Check-in',
                    'check-out': 'Check-Out',
                    'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                }
            }
        },
        methods: {
            setCheckinDate(newDate) {
                console.log('test');
            },
            fetchBookedDates() {
                window.fetch(Routing.generate('bookings'))
                    .then(checkStatus)
                    .then(response => response.json())
                    .then(data => {
                        this.bookedDates = data['period'];
                        this.maxDate = new Date(data['maxDate']);
                    })
                    .catch((error) => console.log(error));
            },
        },
        created() {
            this.fetchBookedDates();
        }
    }

    function checkStatus(response) {
        if (response.status >= 200 && response.status < 300) {
            return Promise.resolve(response);
        }
        else {
            return Promise.reject(new Error(response.statusText));
        }
    }

</script>