exchange-2.0/resources/assets/vue/components/general/forms/DatePickerLimitRangeComponent.vue

<template>
    <input class="form-control">
</template>

<script>
    export default {
        props: {
            value: {
                required: false
            },
            maxDays: {
                type: Number,
                default: 14
            },
        },
        mounted() {
            let vm = this;

            $(this.$el).datepicker({
                format: 'dd-mm-yyyy',
                autoclose: true,
                clearBtn: true,
                todayHighlight: true
            }).val(this.value).trigger("change").on('changeDate', function () {
                vm.$emit('input', this.value);
            });
        },
        watch: {
            value: function (value) {
                $(this.$el).val(value).trigger('change');
            }
        },
        methods: {
            setStartDate(date) {
                const startDate = date instanceof Date ? date : new Date(date);
                const maxEndDate = new Date(startDate);
                maxEndDate.setDate(startDate.getDate() + (this.maxDays - 1));

                $(this.$el).datepicker('setStartDate', startDate);
                $(this.$el).datepicker('setEndDate', maxEndDate);

                // Ensure the visual highlighting
                $(this.$el).datepicker('update', startDate);
            }
        }
    }
</script>