在公司開發(fā)的過程中遇到的問題，我們采用了iview的Vue框架。

現(xiàn)有一個需求：用戶在初始時頁面后，DatePicker 的可選時間范圍不作限制，用戶可選擇任意一天。當用戶選擇了某一天(planTime)后，并進行內容查詢后，DatePicker的時間范圍限制為 planTime 所在的這個月。

一開始我的解決方法：設置兩個 DatePicker，v-model都為planTime。當用戶選擇了某一天并進行查詢后，通過判斷 planTime 不為空顯示”一開始就被限制了時間范圍“的DatePicker控件。但是，因為我一開始不知道用戶會選擇哪一天，所以，此時我只能限制用戶選擇當前這個月。

貼代碼：

format="yyyy-MM-dd">

format="yyyy-MM-dd">

data() {

return {

optionsOfTime: {? // 約束計劃保養(yǎng)時間

disabledDate(date) {

const myDate = new Date(),

day = myDate.getDate()

// 當一次制定多個保養(yǎng)計劃時，限制只能選擇這個月

return date && Date.now() + (getNumOfMouthDays() - day) * 86400000 < date.valueOf() || date.valueOf() < Date.now() - day * 86400000;

}

},

planTime: ''

}

}

/**

* 獲取一個月有多少天

* @returns {number}

*/

export const getNumOfMouthDays = () => {

var curDate = new Date();

/* 獲取當前月份 */

var curMonth = curDate.getMonth();

/* 生成實際的月份: 由于curMonth會比實際月份小1, 故需加1 */

curDate.setMonth(curMonth + 1);

/* 由curMouth 加了1，所以這個是 curDate 是下個月的，setDate(0)之后就是這個月的最后一天 */

// setDate()方法用來設定日期物件中本地時間的日，也就是每個月中的幾號，傳入?yún)?shù)是一個1~31的整數(shù)。

// 若是傳入的值超出當月份的正常範圍，setDate()方法也會依據(jù)超出的數(shù)值進行計算，

// 譬如setDate(0)會讓日期變成前一個月的最後一天，setDate(-1)會讓日期變成前一個月的倒數(shù)第二天。

// 若當月有31天，那setDate(32)會讓日期變成下個月的第一天。

curDate.setDate(0);

/* 返回當月的天數(shù) */

return curDate.getDate();

}

總結

以上是生活随笔為你收集整理的iview日期选择器更改显示日期书_如何动态 设置 iview DatePicker 控件的 禁用日期（option）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。