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)
        }
      }
    }

我做错什么了吗？

Update1：

<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>

我仍然可以选择2018年7月19日之前的过去日期

Answer 1

如果使用垂直日历

您只是希望将此属性添加为“最小日期”

这是一个例子。

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

Answer 2

如果您使用的是v-date-picker，请通过Vuetify设置道具min

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

Answer 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;）

Answer 4

仅当我告知开放日期属性的某些值时，禁用日期才对我有用，如下所示：

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

Answer 5

由于问题而来到这里，但是在检查了控制台之后，我看到了问题。

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

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

而不是 :disabledDates="state.dateDisabled"

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

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

5 个答案: