在datepicker上禁用日期問題

Question

我正在使用vue-date-range日期選擇器。在這裏，我使用disabledStart和disabledEnd道具，但它沒有禁用日期。爲了禁用日期，它需要一個對象。我傳遞的對象，但它不起作用。我不知道什麼是禁用日期的正確的對象格式。

任何幫助，將不勝感激 插件的鏈接 https://www.npmjs.com/package/vue-date-range

這裏是HTML

<div class="form-group form-group-lg"> 
       <label>When is it required?</label> 
       <daterange class="calendar" 
        :sync-range.sync="range" 
        :disable-days-before-today="disableDaysBeforeToday" 
        :days-disabled-start="disableStart" 
        :days-disabled-end="disableEnd" 
        :lang="lang" @change="onChange"> 
        </daterange> 
       </div> 

JS

<script> 
import { DateRange } from 'vue-date-range'; 
export default { 


    data() { 
    return { 
     lang: 'en', 
     disableDaysBeforeToday: true, 
     disableStart: { startDate:moment()}, 
     disableEnd: { 
     endDate: moment().add(7, 'days') 
     }, 
     range: {} 
    } 

    }, 
    components: { 
    'daterange': DateRange 
    }, 

    methods: { 

    onChange(range) { 
     console.log("START", range.startDate._d); 
     console.log("END", range.endDate._d); 
    }, 
    disable() { 
     console.log("on button click disable dates"); 
     this.disableStart._d = new Date('2017-08-25').toString() 


    } 


    } 


} 
</script> 

Answer 1

由於Phil指出，在查看source code of this library後，我可以確認使用的對象是moment.js的日期對象。
所以只需將moment.js的日期對象傳遞給days-disabled-start和days-disabled-end。

請參閱下面的demo。

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>