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

【问题标题】：How can I disable all dates up to 14 days ahead of the current date in Vue Datepicker?如何在 Vue Datepicker 中禁用当前日期前最多 14 天的所有日期？
【发布时间】：2021-02-28 21:39:59
【问题描述】：

我看到有人问过类似的问题，但没有人回答我的问题。我有一个 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>

【问题讨论】：

标签： javascript html laravel vue.js datepicker

【解决方案1】：

试试

data() {

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：