我們公司項目需要限制今天日期之前的不能選中,我找了很多資料也找了官網,但是出來的效果還是有問題,比如我限制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
},
終於可以了,熱淚盈眶 ~
效果就是這個地方會有一個這樣的禁止圖標(截圖不包括鼠標效果,截不出來,湊合看看吧,就是這個意思)