[Vuejs]-How can I disable all dates up to 14 days ahead of the current date in Vue Datepicker?

by

0👍

Try

data() {

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

0👍

You need to add the proper amount of time. In yours, you are subtracting. Also, you were not setting your v-model correctly and it was causing an error in vue. This is also fixed in the example, which now blocks all dates previous to 2wks in the future from the current time.

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>

Leave a comment