vue中對日期的起止時間做限制

在寫代碼時，有時候我們會寫像這樣的樣式的日期形式

此時我們就需要限制日期的起止時間，開始的日期要比中止的日期更靠前，
第一種情況當先選擇開始日期的時候，終止日期的最早日期要大於等於選擇的開始日期。

此時終止日期會這樣顯示（終止日期的最小日期一定大於等於開始日期時間）

第二種情況如果先選擇終止日期的話，再選擇開始日期，則此時開始日期的最大的日期要小於等於終止日期

此時開始日期會這樣顯示（最大可選擇日期不超過終止日期）

在我們正常寫代碼時是不會出現上面這樣的限制的，而是會出現可用隨意設置日期的情況，當我們想要上面這樣的限制的時候就需要在寫代碼上添加上限制

                 <el-form-item label="項目起止日期" prop="BeginDate" label-width="1.2rem">
                  <el-date-picker
                    type="date"
                    v-model="inputInfo.BeginDate"
                    style="width: 1.9rem"
                    :picker-options="pickerOptionsStart"
                    placeholder="選擇日期">
                  </el-date-picker>
                </el-form-item>
                <span>至</span>
                <el-form-item label="" prop="EndDate" label-width="0.8rem">
                  <el-date-picker
                    type="date"
                    v-model="inputInfo.EndDate"
                    style="width: 1.9rem"
                    :picker-options="pickerOptionsEnd"
                    placeholder="選擇日期">
                  </el-date-picker>
                </el-form-item>
            //在data中需要寫函數做限制
             data() {
              return {
                // 項目起始日期限制
                  pickerOptionsStart: {
                    disabledDate: time => {
                      if (this.inputInfo.EndDate) {
                          return time.getTime() > new Date(this.inputInfo.EndDate).getTime()
                      }
                    }
                  },
                // 項目終止日期限制
                  pickerOptionsEnd: {
                      disabledDate: time => {
                        return time.getTime() < new Date(this.inputInfo.BeginDate).getTime()-1*24*60*60*1000
                      }
                  },
                 }

在寫代碼日期時要特別寫上:picker-options="pickerOptionsStart"和:picker-options="pickerOptionsEnd"兩個代碼，這樣可以在data里對日期做到限制。

走別人不曾走過的路，才能看到別人不曾看到的風景。