vue項目 vue-datepicker :limit 屬性 限制今日之前的日期 插件修改

我們公司項目需要限制今天日期之前的不能選中，我找了很多資料也找了官網，但是出來的效果還是有問題，比如我限制2020-03-15   2020-04-20  但是在三月的那個頁面裏二月的也是可以選中的

這個是因爲03-15到04-20之間包括了三月的24-29，這個插件裏面不知道是不是我下載的版本問題，它是不區分月份的

把數據打印出來能 看到03-31之後應該是04-01但是這裏顯示03-01

然後動爪子改插件  我先從頭說吧

1.安裝插件 npm install vue-datepicker --save

2.組件內使用

  import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue'    因爲這個支持es6

components: {
     myDatepicker
  }，//掛載一下就可以用了
data(){
    return{
    // for Vue 1.0
    import myDatepicker from 'vue-datepicker/vue-datepicker-1.vue'

   // for Vue 2.0
    import myDatepicker from 'vue-datepicker'

//建議用這個引入  上面那兩個去掉
 import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue' 

export default {
  data () {
    return {
      // for Vue 1.0
      starttime: '',
      endtime: '2016-01-19',
      testTime: '',
      multiTime: '',

      // for Vue 2.0
      startTime: {
        time: ''
      },
      endtime: {
        time: ''
      }

      option: {
        type: 'day',
        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],//這裏就是週一到週日 一月到二月 可以改漢字
        format: 'YYYY-MM-DD',
        placeholder: 'when?',
        inputStyle: {  //輸入框的樣式
          'display': 'inline-block',
          'padding': '6px',
          'line-height': '22px',
          'font-size': '16px',
          'border': '2px solid #fff',
          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
          'border-radius': '2px',
          'color': '#5F5F5F'
        },
        color: {
          header: '#ccc',
          headerText: '#f00'
        },
        buttons: {
          ok: 'Ok',
          cancel: 'Cancel'
        },
        overlayOpacity: 0.5, // 0.5 as default
        dismissible: true // as true as default
      },
      
      limit: [{
          type: Array,
          default:function _default(){
            return [];
          }
      },
        {  //這個就是限制時間選擇用的
        type:'fromto',
        from:Date.now() - 86400000,  //起始時間
        // to:'2020-4-12' //結束時間
      }]
    }
  }
  
    }
        
    }
}

        type:'fromto',
        from:Date.now() - 86400000,  //起止時間   起止日選擇今天-1就是包括今天可以選擇
        to:'2020-4-12'  //這個如果沒有可以不限制

3.node_modules文件夾下找到vue -datepicker文件夾  vue-datepicker-es6.vue文件

打開文件後搜索fromto然後找到該函數

繼續往下找

大概就能看懂這三個就是如果選擇了fromto屬性就對日曆裏面的數據進行限制，第二張圖的函數就是判斷日曆裏面的數據是否在限制日期之內，如果是就把unavailable屬性變爲true  這個屬性就是控制某一天可選不可選 ，第三個圖就是執行第二個函數裏的判斷返回真假值    就是說比如現在是03-17  這些函數 就判斷03-17在不在03-15和04-20之間

 

 

然後我打印了這個days數據對不上，肯定是前面有地方處理了，然後找到

把這一段拿下來，然後就對應了，都是42  長度處理一致了，但是問題還沒解決，限制還是不對，上面說了三四月份這個插件都按照三月份處理，但是後面又判斷在不在限制時間裏，比如本來是04-1但是插件會處理成03-1所以繼續改，既然是判斷肯定是改第三個函數

多加的代碼貼在這方便複製   總是這裏就是處理一下把03-31後面的03-01改成04-01

 let tmpMoment;
      if(day.value!=1 && this.pdmonth == 1){
        tmpMoment = moment(this.checked.year + '-' + this.pad(this.checked.month - 1) + '-' + this.pad(day.value))
      }else if(day.value == 1 && this.pdmonth == 1){
        this.pdmonth = 2;
        tmpMoment = moment(this.checked.year + '-' + this.pad(this.checked.month) + '-' + this.pad(day.value))
      }else if(day.value != 1 && this.pdmonth == 2){
        tmpMoment = moment(this.checked.year + '-' + this.pad(this.checked.month) + '-' + this.pad(day.value))
      }else if(day.value == 1 && this.pdmonth == 2){
        this.pdmonth = 3;
        tmpMoment = moment(this.checked.year + '-' + this.pad(Number(this.checked.month) + 1) + '-' + this.pad(day.value))
      }else{
        tmpMoment = moment(this.checked.year + '-' + this.pad(Number(this.checked.month) + 1) + '-' + this.pad(day.value))
      }

這裏面的this.pdmonth 需要在date裏聲明一下，      pdmonth:1,用來作爲判斷標誌，但是這種標誌只能用一次，當上一個和下一個月來回切換的時候

就是這裏，一點擊就會再次出發上面那些函數，但是this.pdmonth上次用過了，所以就需要清除痕跡，找到上面那兩個按鈕觸發函數

 

 

這裏添加一行        this.pdmonth = 1;

 

但是事情還是木有解決 ……………………    然後呢，繼續努力

 

既然知道unavailable這個屬性掌控了能不能選中，那就和這個有關係

找到與這個相關的函數，發現它只判斷了合適的情況 沒有else的情況   加上！

limitFromTo (limit, days) {
      if (limit.from || limit.to) {
        days.map((day) => {
          // console.log(days,'000')
          if (this.getLimitCondition(limit, day)) {
            day.unavailable = true
          }else{  //判斷處加一個else  
            day.unavailable = false
          }
        })
      }
      return days
    },

 

 

終於可以了，熱淚盈眶  ~

 

效果就是這個地方會有一個這樣的禁止圖標（截圖不包括鼠標效果，截不出來，湊合看看吧，就是這個意思）