Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment