Not able to disable past dates on vuejs-datepicker

问题

I want to disable all past dates before "today". I am using vuejs-datepicker. vuejs-datepicker However it's not working nor there are any errors in the console log. I can still choose past dates.

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

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

Am I doing something wrong?

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>

I still can choose past dates before 19.07.2018

回答1:

You are missing a "," in your data object:

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

Other than that it seems to be working for me.

https://codesandbox.io/s/ww60k220z8

Edit: Turns out you used an outdated version of vuejs-datepicker which was build for VueJS 1.x. For problems in the future it might be beneficial to also post your package.json ;)

回答2:

Disabled date has only worked for me when I inform some value for open-date property, as follow:

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

回答3:

Came here because of the problem but after checking my console I saw the issue.

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

use :disabled-dates="state.dateDisabled"

instead of :disabledDates="state.dateDisabled"

I hope it helps someone.

来源：https://stackoverflow.com/questions/51420756/not-able-to-disable-past-dates-on-vuejs-datepicker

标签

Vue.js

datepicker