在公司開發(fā)的過(guò)程中遇到的問(wèn)題，我們采用了iview的Vue框架。
現(xiàn)有一個(gè)需求：用戶在初始時(shí)頁(yè)面后，DatePicker 的可選時(shí)間范圍不作限制，用戶可選擇任意一天。當(dāng)用戶選擇了某一天(planTime)后，并進(jìn)行內(nèi)容查詢后，DatePicker的時(shí)間范圍限制為 planTime 所在的這個(gè)月。
一開始我的解決方法：設(shè)置兩個(gè) DatePicker，v-model都為planTime。當(dāng)用戶選擇了某一天并進(jìn)行查詢后，通過(guò)判斷 planTime 不為空顯示”一開始就被限制了時(shí)間范圍“的DatePicker控件。但是，因?yàn)槲乙婚_始不知道用戶會(huì)選擇哪一天，所以，此時(shí)我只能限制用戶選擇當(dāng)前這個(gè)月。
貼代碼：

<Form-item label="計(jì)劃保養(yǎng)時(shí)間">
    <div v-if="planTime == ''">
      <Date-picker type="date" placeholder="請(qǐng)選擇日期" v-model="planTime" :options="optionsOfTime" key="one"
                   format="yyyy-MM-dd"></Date-picker>
    </div>
    <div v-else>
      <Date-picker type="date" placeholder="請(qǐng)選擇日期" v-model="planTime" key="two"
                   format="yyyy-MM-dd"></Date-picker>
    </div>
</Form-item>

data() {
      return {
        optionsOfTime: {  // 約束計(jì)劃保養(yǎng)時(shí)間
          disabledDate(date) {
            const myDate = new Date(),
              day = myDate.getDate()
            // 當(dāng)一次制定多個(gè)保養(yǎng)計(jì)劃時(shí)，限制只能選擇這個(gè)月
            return date && Date.now() + (getNumOfMouthDays() - day) * 86400000 < date.valueOf() || date.valueOf() < Date.now() - day * 86400000;
          }
        },
        planTime: ''
        }
   }

/**
 * 獲取一個(gè)月有多少天
 * @returns {number}
 */
export const getNumOfMouthDays = () => {
  var curDate = new Date();
  /* 獲取當(dāng)前月份 */
  var curMonth = curDate.getMonth();
  /* 生成實(shí)際的月份: 由于curMonth會(huì)比實(shí)際月份小1, 故需加1 */
  curDate.setMonth(curMonth + 1);
  /* 由curMouth 加了1，所以這個(gè)是 curDate 是下個(gè)月的，setDate(0)之后就是這個(gè)月的最后一天 */
  // setDate()方法用來(lái)設(shè)定日期物件中本地時(shí)間的日，也就是每個(gè)月中的幾號(hào)，傳入?yún)?shù)是一個(gè)1~31的整數(shù)。
  // 若是傳入的值超出當(dāng)月份的正常範(fàn)圍，setDate()方法也會(huì)依據(jù)超出的數(shù)值進(jìn)行計(jì)算，
  // 譬如setDate(0)會(huì)讓日期變成前一個(gè)月的最後一天，setDate(-1)會(huì)讓日期變成前一個(gè)月的倒數(shù)第二天。
  // 若當(dāng)月有31天，那setDate(32)會(huì)讓日期變成下個(gè)月的第一天。
  curDate.setDate(0);
  /* 返回當(dāng)月的天數(shù) */
   return curDate.getDate();
}