I am attempting to set a range of dates to allow users to pick the date using vue-datepicker, since desktop safari users have problems using input type date. Going thru the documentation of vue-datepicker and looking at the demo it has, I got really confused. Where do I apply the disable data to limit the range of dates on the datepicker dropdown?

I have tried to put the :disabled=disabled in datepicker, but documentation says it expects a boolean response. Any help is greatly appreciated!

<template>

    <div>

        <datepicker v-model=booking_date></datepicker>

    </div>

</template>

<script>

import Datepicker from 'vuejs-datepicker';

import moment from 'moment';

export default {

    data() {

        return {

            moment: moment,

            booking_date: null,

            disabled: {},

        }

    },

    mounted() {

        this.defaultDateRange();

    },

    methods: {

        defaultDateRange() {

            let tzoffset = new Date().getTimezoneOffset() * 60000;

            let today = (new Date(Date.now() - tzoffset)).toISOString().substr(0, 10);

            let max = new Date();

            max.setDate(max.getDate() + 30);

            let max_date = max.toISOString().substr(0, 10);

            this.disabled = {

                to: Date.parse(today),

                from: Date.parse(max_date)

            };

            this.booking_date = Date.parse(today);

        }

    }

}

</script>

new attempt:

<datepicker v-model=booking_form.booking_date :disabled-dates=disabled></datepicker>