如何在 Vue Datepicker 中禁用当前日期前 14 天的所有日期？

Question

我看到有人问过类似的问题，但没有人回答我的问题。 我有一个 vue js datepicker，我需要允许用户选择一个日期，但这个日期不能比当前日期早 2 周。 所以我需要禁用所有日期，然后从现在开始 14 天启用。

目前我有它如下，所以可以禁用直到当前日期的日期，任何人都可以禁用接下来的 14 天吗？

 import Datepicker from 'vuejs-datepicker' export default { components: { Datepicker }, data() { return { model: { date: '' }, DatePickerFormat: 'dd/MM/yyyy', disabledDates: { to: new Date(Date.now() - 864000) }, }; }, };

 <datepicker class="form-control" id="customer_start_date" v-model="date" :format="DatePickerFormat" :disabledDates="disabledDates"> </datepicker>

Answer 1

尝试

data() {

    return {
    
        //..
        ranges: [{ // Disable dates in given ranges (exclusive).
            from: new Date(),
            to: new Date(new Date().getTime() + (14 * 24 * 60 * 60 * 1000));
        }
    }
    
}

Answer 2

您需要添加适当的时间。 在你的，你正在减去。 此外，您没有正确设置 v-model，导致 vue.js 出错。 这在示例中也得到了修复，它现在阻止了从当前时间到未来 2wks 之前的所有日期。

 new Vue({ el: '#app', template: ` <vuejs-datepicker class="form-control" id="customer_start_date" v-model="date" :format="DatePickerFormat" :disabledDates="disabledDates"> </vuejs-datepicker> `, components: { vuejsDatepicker }, data() { return { date: '', DatePickerFormat: 'dd/MM/yyyy', disabledDates: { to: new Date(Date.now() + (14 * 24 * 60 * 60 * 1000)) }, }; }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vuejs-datepicker"></script> <div id="app"></div>