?時(shí)間戳，一天

let oneDayTime = 86400000
function timeSec(type) {
  //86400000為一天時(shí)間戳
  let time = 86400000;
  switch (type) {
    case "1":
      time = oneDayTime*3;
      break;
    case "2":
      time = oneDayTime*31;
      break;
    case "3":
      time = oneDayTime*365;
      break;
    case "4":
      time = oneDayTime*365;
      break;
    default:
      break;
  }
  return time;
}

想限制只能選日期間隔為一年，聯(lián)合選擇器樣式不好改，使用倆單獨(dú)的

有兩個(gè)辦法限制

1.一個(gè)在外層使用form通過表單驗(yàn)證控制，出現(xiàn)錯(cuò)誤提示（由于是兩個(gè)單獨(dú)的組件，觸發(fā)驗(yàn)證的方式又為單個(gè)失去焦點(diǎn)，所以倆組件無法實(shí)時(shí)更新）

2.用datepick自帶的屬性disabledDate ，為pick-options中的函數(shù)，在js中綁定函數(shù)，通過控制區(qū)間禁選不符合條件的日期，觸發(fā)方式在每次選擇時(shí)間時(shí)，可以實(shí)時(shí)更新無錯(cuò)誤提示

1.form實(shí)現(xiàn)

form-html 
 <el-form ref="queryForm" :model="queryParams" inline>
 
    <el-form-item
      prop="startDate"
      :rules="[
        { required: true, message: '請(qǐng)選擇開始日期' },
        { validator: checkFinalPayTime, trigger: 'blur' },
      ]"
    >
      <el-date-picker
        v-model="queryParams.startDate"
        :clearable="false"
        type="date"
        :default-value="new Date()"
        :disabledDate="disabledStartDate"
        :value-format="YYYY - MM - DD"
        placeholder="開始時(shí)間"
      />
    </el-form-item>
    <el-form-item
      prop="endDate"
      :rules="[
        { required: true, message: '請(qǐng)選擇開始日期' },
        { validator: checkFinalPayTime, trigger: 'blur' },
      ]"
    >
      <el-date-picker
        v-model="queryParams.endDate"
        :clearable="false"
        type="date"
        :disabledDate="disabledEndDate"
        :default-value="new Date()"
        :value-format="YYYY - MM - DD"
        placeholder="結(jié)束時(shí)間"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="search"> 查詢 </el-button>
      <el-button icon="Refresh" @click="reset"> 重置 </el-button>
    </el-form-item>
  </el-form>

form-js
//form驗(yàn)證函數(shù)，觸發(fā)后更改另一個(gè)驗(yàn)證錯(cuò)誤不會(huì)消失
const checkFinalPayTime = (rule, value, callback) => {
  const startDate = new Date(proxy.queryParams.startDate).getTime();
  const endDate = new Date(proxy.queryParams.endDate).getTime();
  console.log(startDate, endDate);
  console.log(startDate + 31536000000 > endDate);
  if (startDate + 31536000000 < endDate) {
    return callback(new Error("起止日期不能超過一年"));
  } else {
    callback();
  }
};

2.代碼實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-751355.html

disabledDate-html
<el-form ref="queryForm" :model="queryParams" inline>
 
      <el-date-picker
        v-model="queryParams.startDate"
        :clearable="false"
        type="date"
        :default-value="new Date()"
        :disabledDate="disabledStartDate"
        :value-format="YYYY - MM - DD"
        placeholder="開始時(shí)間"
      />

      <el-date-picker
        v-model="queryParams.endDate"
        :clearable="false"
        type="date"
        :disabledDate="disabledEndDate"
        :default-value="new Date()"
        :value-format="YYYY - MM - DD"
        placeholder="結(jié)束時(shí)間"
      />
   
  </el-form>

disabledDate-js
const disabledStartDate = (time) => {
  const endDate = new Date(proxy.queryParams.endDate);
  //該函數(shù)會(huì)遍歷整個(gè)頁，time為該選擇頁中日期的時(shí)間，
  //當(dāng)return為false表示該日期可選,true則為不可選
  
  return (
    time.getTime() < endDate.getTime() - 31536000000 ||
    time.getTime() > endDate.getTime()
  );
};
const disabledEndDate = (time) => {
  const startDate = new Date(proxy.queryParams.startDate);
  //該函數(shù)會(huì)遍歷整個(gè)頁，time為該選擇頁中日期的時(shí)間，
  //當(dāng)return為false表示該日期可選,true則為不可選
  
  return (
    time.getTime() > startDate.getTime() + 31536000000 ||
    time.getTime() < startDate.getTime()
  );
};

到了這里，關(guān)于element ui datePick時(shí)間日期一段時(shí)間，限制選擇日期的范圍的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！