datepicker.vue

<template>
    <datepicker
            :startDate="startDate"
            @check-in-changed="setCheckInDate"
            @check-out-changed="setCheckOutDate"
            :maxNights="21"
            :minNights="minNights"
            :checkIn="checkIn"
            :checkOut="checkOut"
            :disabledDates="bookedDates"
            :firstDayOfWeek="1"
            :i18n="lang"
            :showYear="true"
    >

    </datepicker>
</template>

<script>
    import datepicker from 'vue-hotel-datepicker';
    import swal from 'sweetalert';
    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,
                checkIn: '',
                checkOut: '',
                minNights: 6, //0 indexed
                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(newCheckIn) {
                this.checkIn = newCheckIn;
                if (this.checkOut instanceof Date && this.checkIn instanceof Date) {
                    this.fetchPriceTable();
                }
            },
            setCheckOutDate(newCheckOut) {
                this.checkOut = newCheckOut;
                if (this.checkOut instanceof Date && this.checkIn instanceof Date) {
                    this.fetchPriceTable();
                }
            },
            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));
            },
            fetchPriceTable() {
                window.fetch(Routing.generate('booking_data'), { //'window' is needed for the polyfill
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        checkin: this.checkIn,
                        checkout: this.checkOut
                    })
                })
                    .then(checkStatus)
                    .then(response => response.json())
                    .then(data => {
                        if (data['error']) {
                            swal('Those dates are already booked', '', 'error');
                        } else {
                            document.querySelector('.price-table').innerHTML = data['html'];
                        }
                    })
                    .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>