無法在 vuejs-datepicker 上禁用過去的日期

Question

我想禁用“今天”之前的所有過去日期。 我正在使用 vuejs-datepicker。 vuejs-datepicker但是它不起作用，控制台日志中也沒有任何錯誤。 我仍然可以選擇過去的日期。

<datepicker
     v-model="date"
     :format="DatePickerFormat"
     :disabledDates="disabledDates">
</datepicker>

data(){
      return {
        date: '',
        DatePickerFormat: 'dd/MM/yyyy',
        disabledDates: {
          to: new Date(Date.now() - 8640000)
        }
      }
    }

難道我做錯了什么？

更新1：

<template>
  <datepicker
     v-model="model.date"
     :format="DatePickerFormat"
     :disabledDates="disabledDates">
</datepicker>
</template>

<script>
  import Datepicker from 'vuejs-datepicker'

  export default {

    components: {
      Datepicker
    },

    data(){
      return {
        model: {
          date: ''
        }
        DatePickerFormat: 'dd/MM/yyyy',
        disabledDates: {
          to: new Date(Date.now() - 8640000)
        }
      }
    }

  }

</script>

我仍然可以選擇 19.07.2018 之前的過去日期

Answer 1

禁用日期僅在我通知開放日期屬性的某些值時對我有用，如下所示：

 <template> <datepicker v-model="model.date" :format="DatePickerFormat" :open-date="new Date()" :disabledDates="disabledDates"> </datepicker> </template>

Answer 2

您的數據對象中缺少“，”：

data() {
      return {
        model: {
          date: ''
        }, <---------------------------
        DatePickerFormat: 'dd/MM/yyyy',
        disabledDates: {
          to: new Date(Date.now() - 8640000)
        }
      }
    }

除此之外，它似乎對我有用。

https://codesandbox.io/s/ww60k220z8

編輯：原來您使用的是為 VueJS 1.x 構建的過時版本的 vuejs-datepicker。 對於將來出現的問題，也發布您的 package.json 可能會有所幫助；)

Answer 3

如果您使用 v-calendar

你只需要添加這個屬性“min-date”

這是一個例子。

<v-date-picker
  v-model='date'
  :min-date='new Date()'
  is-inline
  />

Answer 4

如果您使用的是v-date-picker picker ，則來自 Vuetify，只需設置 props min

              <v-date-picker
                      v-model="dateTermino"
                      :min="new Date().toISOString().substr(0, 10)"
              ></v-date-picker>

Answer 5

因為這個問題來到這里，但在檢查我的控制台后我看到了這個問題。

<datepicker :input-class="'form-control bg-light'" :disabled-dates="state.dateDisabled"></datepicker>

使用:disabled-dates="state.dateDisabled"

而不是:disabledDates="state.dateDisabled"

我希望它可以幫助某人。