el-date-picker 結束時間大於等於開始時間,早於今天的時間不可選


<el-col style="width:calc(42.2%);padding:0;">
    <el-date-picker 
        :clearable="false" 
        :type="dateType" 
        placeholder="選擇開始時間" 
        :format="dateFormat" 
        :value-format="dateFormat" 
        v-model="starttime"
        :picker-options="pickerOptions0"
        :default-time="startDefaultTime"
        style="width: 100%;"
        @change="handleStartTime(starttime)"
        clearable>
    </el-date-picker>
</el-col>
<el-col class="line" style="text-align:center;width:calc(15%);">-</el-col>
<el-col style="width:calc(42.2% );padding:0;">
      <el-date-picker 
        :clearable="false" 
        :type="dateType" 
        placeholder="選擇結束時間"
        :format="dateFormat" 
        :value-format="dateFormat" 
        v-model="endtime"
        :picker-options="pickerOptions1"
        style="width: 100%;"
        :default-time="endDefaultTime"
        @change="handleEndTime(endtime)" clearable>
      </el-date-picker>
</el-col>

配置:

// 判斷兩個時間 結束時間不能大於開始時間
      pickerOptions0: {
        disabledDate: (time) => {
          // let beginDateVal = new Date(this.endtime).getTime()
          // if (beginDateVal) {
          //   return (time.getTime() > beginDateVal) || (time.getTime() > Date.now())
          // } else {
            return time.getTime() < Date.now() - 8.64e7
          // }
        }
      },
      pickerOptions1: {
        disabledDate: (time) => {
          let beginDateVal = new Date(this.form.startTime).getTime()
          if (beginDateVal) { // 等於的時候是臨界值00:00:00
            return (time.getTime()) <= beginDateVal - 8.64e7
          } else {
            return time.getTime() < Date.now() - 8.64e7 
          }
        }
      }

效果:

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM