快捷導(dǎo)航

el-date-picker日期選擇限制范圍的實例代碼

更新時間：2022年09月21日 09:30:53 作者：Z-HarOld

這篇文章主要介紹了el-date-picker日期選擇限制范圍,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

1.如果只比較兩個值的話---效果是這種的

// 這是<template>的
 <el-row>
            <el-col :span="12">
              <el-form-item label="計劃評審日期(起)" prop="planPsDateStart">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateStart"
                  type="date"
                  :picker-options="pickerOption_start"
                  placeholder="開始時間"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="計劃評審日期(止)" prop="planPsDateEnd">
                <el-date-picker
                  v-model="vm.edit.data.planPsDateEnd"
                  type="date"
                  :picker-options="pickerOption_end"
                  placeholder="結(jié)束時間"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

          </el-row>

// 這是<script>下的data的
  pickerOption_start: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateEnd !== undefined) {
            return time.getTime() > this.vm.edit.data.planPsDateEnd
          }
        }
      },
      pickerOption_end: {
        disabledDate: (time) => {
          if (this.vm.edit.data.planPsDateStart !== undefined) {
            return time.getTime() < this.vm.edit.data.planPsDateStart
          }
        }
      }

2.如果是table一直在循環(huán)這種日期，而且只比較每一行的兩個日期

效果是這樣的

// 放在el-table下的兩列
<el-table-column prop="lastModifyUserId" label="計劃開始日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.planStart"
                  type="date"
                  placeholder="計劃開始日期"
                  :picker-options="{disabledDate: (time) => {if (scope.row.planEnd !== undefined) {return time.getTime() > scope.row.planEnd} }}"
                  style="width: 100%"
                  :disabled="limitsDisabledFun()"
                />
              </template>
            </el-table-column>
            <el-table-column prop="name" label="計劃結(jié)束日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.planEnd"
                  type="date"
                  placeholder="計劃結(jié)束日期"
                  :picker-options="{disabledDate: (time) => {if (scope.row.planStart !== undefined) {return time.getTime() < scope.row.planStart} }}"
                  style="width: 100%"
                  :disabled="limitsDisabledFun()"
                />
              </template>
            </el-table-column>

原理一樣的-就是把data下的pickerOption直接嵌到代碼里面，不放在data中

到此這篇關(guān)于el-date-picker日期選擇限制范圍的實例代碼的文章就介紹到這了,更多相關(guān)el-date-picker日期選擇限制范圍內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: