无法在 vuejs-datepicker 上禁用过去的日期答案

【问题标题】：Not able to disable past dates on vuejs-datepicker无法在 vuejs-datepicker 上禁用过去的日期
【发布时间】：2018-07-19 10:50:34
【问题描述】：

我想禁用“今天”之前的所有过去日期。我正在使用 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 之前的过去日期

【问题讨论】：

你能准备一个简短的例子来说明问题吗？在我的情况下工作正常。
是的，但是准备在哪里？因为上面的代码来自我试图解决这个问题的项目。我用 .vue 文件的复制粘贴更新了我的第一篇文章。
使用codesandbox.io（喜欢datepicker demo）或任何其他支持Vue的在线工具。就目前而言，尚不清楚您的情况出了什么问题。代码本身对我来说很好。
这和@puelo在codesandbox中给出的答案一样。

标签： vue.js datepicker

【解决方案1】：

如果你使用的是来自 Vuetify 的 v-date-picker，只需设置 props min

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

【讨论】：

【解决方案2】：

如果你使用 v-calendar

你只需要添加这个属性“min-date”

这是一个例子。

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

【讨论】：

【解决方案3】：

您的数据对象中缺少“，”：

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 可能会有所帮助；）

【讨论】：

不，完全干净......这太奇怪了......不知道发生了什么。
你使用的是哪个版本的 vuejs-datepicker？
最新的，我是通过“npm install vuejs-datepicker --save”安装的。将其导入到 .vue 文件中，并且...正如文档中所述。缺少的“，”是一个错字
那么你可能需要调试你的问题。如果你通过 webpack 或类似的东西提供服务，你应该能够在 Datepicker 组件中设置断点，然后可能会找出问题所在。您可能还可以删除应用程序的某些部分，直到找到导致问题的原因。很难判断发生了什么，但似乎是您的应用程序的一个孤立问题
我从 .vue 文件中删除了与日期选择器无关的所有内容 - 再次它不起作用，到底发生了什么

【解决方案4】：

只有当我通知 open-date 属性的某些值时，禁用日期才对我有用，如下所示：

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

【讨论】：

【解决方案5】：

因为问题而来到这里，但在检查了我的控制台后我发现了问题。

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

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

而不是 :disabledDates="state.dateDisabled"

我希望它对某人有所帮助。

【讨论】：