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

我們?cè)谑褂胑lement的DateTimePicker 日期時(shí)間選擇器的時(shí)候，有時(shí)候會(huì)限制范圍，比如只能選擇一個(gè)月的時(shí)間，這時(shí)候需要對(duì)選擇的范圍進(jìn)行限制。

實(shí)現(xiàn)方案：

我們看element官網(wǎng)我們發(fā)現(xiàn)可以用picker-options來(lái)對(duì)其限制，實(shí)現(xiàn)方法如下：

<el-date-picker
   v-model="loggerQueryData.operateTime"
   type="datetimerange"
   start-placeholder="開(kāi)始時(shí)間"
   end-placeholder="結(jié)束時(shí)間"
   @change="onChangeTime('picker')"
   :picker-options="pickerOptions">
</el-date-picker>

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          let now = new Date();   //獲取此時(shí)的時(shí)間
          let nowData = new Date(  //獲取此時(shí)年月日的后一天
            now.getFullYear(),
            now.getMonth(),
            now.getDate() + 1 //獲取明天
          );
          let oneMonthAgo = new Date(  //獲取一個(gè)月之前的時(shí)間
            now.getFullYear(),
            now.getMonth() - 1,  //獲取上一個(gè)月
            now.getDate() + 1   //將多算的一天減掉
          );
         
          return (
            time.getTime() > nowData.getTime() - 1000  //可以選擇到今天的xxx:xxx:xxx:23:59:59，只有的全部disabled
            || time.getTime() < oneMonthAgo.getTime()  //小于一個(gè)月的全部disabled掉
          );
        }
      },
    }
  }
}

效果圖如下：