項(xiàng)目場(chǎng)景：

總結(jié)一下日期控件實(shí)現(xiàn)開始日期、結(jié)束日期的選擇范圍限制，以便更符合實(shí)際情況。

需求：

1、開始時(shí)間和結(jié)束時(shí)間都不能選當(dāng)前日期之后的時(shí)間。（當(dāng)前時(shí)間：2022年5月16日）
2、先選開始時(shí)間的話，結(jié)束時(shí)間是在開始時(shí)間的后一周內(nèi)選擇，也就是不能選開始時(shí)間之前的日期并且對(duì)開始時(shí)間之后的日期也加了一個(gè)限制。
3、先選結(jié)束時(shí)間的話，開始時(shí)間也是在結(jié)束時(shí)間的前一周內(nèi)選擇，也就是不能選結(jié)束時(shí)間之后的日期并且對(duì)結(jié)束時(shí)間之前的日期也加了一個(gè)限制。

效果如圖

實(shí)現(xiàn)代碼

vue template 代碼：

  <el-form-item label="開始時(shí)間"  required>
    <el-date-picker
       :picker-options="pickerOptionsStart"
       clearable
       size="small"
       style="width: 200px"
       v-model="pullForm.startTime"
       format="yyyy-MM-dd HH:mm:ss"
       value-format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="選擇開始時(shí)間"
      >
    </el-date-picker>
  </el-form-item>
  <el-form-item label="結(jié)束時(shí)間"  required>
     <el-date-picker
       :picker-options="pickerOptionsEnd"
       clearable
       size="small"
       style="width: 200px"
       v-model="pullForm.endTime"
       format="yyyy-MM-dd HH:mm:ss"
       value-format="yyyy-MM-dd HH:mm:ss"
       type="datetime"
       placeholder="選擇結(jié)束時(shí)間"
     >
     </el-date-picker>
   </el-form-item>
	}

script 代碼：

data() {
    return {
       //時(shí)間限制，符合日期先后順序的實(shí)際情況
      pickerOptionsStart: {
        disabledDate: (time) => {
          let sevenDays = 6 * 24 * 3600 * 1000;  //6天
          if (this.pullForm.endTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              //開始日期要在選擇的結(jié)束日期之前,大于結(jié)束時(shí)間的日期不能選
              time.getTime() > new Date(this.pullForm.endTime).getTime() ||
              //先選結(jié)束時(shí)間，在結(jié)束時(shí)間七天之前的不能選（因?yàn)榘ㄗ陨磉@一天，所以是減去六天）
              time.getTime() < new Date(this.pullForm.endTime).getTime() - sevenDays
            );
          }
          return time.getTime() > Date.now() - 8.64e6; //今天及之前
        }
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let sevenDays = 6 * 24 * 3600 * 1000;
          if (this.pullForm.startTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              //結(jié)束日期要在選擇的開始日期之后,小于開始時(shí)間的日期不能選
              time.getTime() < new Date(this.pullForm.startTime).getTime() ||
              //先選開始時(shí)間，在開始時(shí)間七天之后的不能選（因?yàn)榘ㄗ陨磉@一天，所以是加上六天）
              time.getTime() > new Date(this.pullForm.startTime).getTime() + sevenDays
            );
          }
          return time.getTime() > Date.now() - 8.64e6; //今天及之前
        }
      },
    }
}

總結(jié)：

我參考了下面的兩篇文章：

文章1：vue element-ui date-picker 日期選擇器控件 設(shè)置時(shí)間范圍 限制可選的開始時(shí)間和結(jié)束時(shí)間
文章2：ElementUi 中 日期時(shí)間插件DatePicker 限制結(jié)束時(shí)間大于開始時(shí)間且開始時(shí)間小于此刻

文章1里面加完那個(gè)時(shí)間限制不生效，于是我找到了文章二，改了之后就可以用了。（僅僅是弱雞記錄一下，歡迎大家一起交流）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-733379.html

到了這里，關(guān)于vue【element ui】el-date-picker 日期選擇器控件 限制可選的開始時(shí)間和結(jié)束時(shí)間的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！