[Vuejs]-Issue in disabling dates on datepicker

by

2👍

✅

As Phil pointed out, after looking into the source code of this library, I can confirm that the object used is moment.js‘s date object.
So just pass moment.js‘s date object to days-disabled-start and days-disabled-end.

See demo below.

new Vue({
    el: '#range',
    components: {
        'daterange':daterange.DateRange
    },
    data() {
      return {
        lang: 'en',
        range: {
          startDate: moment(),
          endDate: moment().add(2, 'days')
        },
        disableStart: moment().add(3, 'days'),
        disableEnd: moment().add(6, 'days')
      };
    },
    methods: {
      onChange(range) {
        this.range = range;
      },
      setRange (p) {
        if (typeof p === 'number') {
          console.log(p)
          this.range = {
            startDate: moment().add(p, 'days'),
            endDate: moment()
          }
        }
      },
    }
});
<script src="https://cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-date-range@2.2.2/dist/vue-date-range.min.js"></script>
<div id="range" class="calendar-wrapper">
    <span>{{range.startDate.format('YYYY-MM-DD')}}</span>~<span>{{range.endDate.format('YYYY-MM-DD')}}</span>
    <daterange class="calendar" 
      :sync-range="range" 
      :lang="lang" 
      :days-disabled-start="disableStart"
      :days-disabled-end="disableEnd"
      @change="onChange">
    </daterange>
    <button @click.stop.prevent="setRange(-7)">Last 7 days</button>
    <button @click.stop.prevent="setRange(-30)">Last 1 month</button>
</div>
👤choasia

Leave a comment