element-ui 日期選擇器-開始結束日期選擇限制


代碼

最簡潔代碼

<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="開始日期"
      :picker-options="pickerOptionsStart"
    />
    <span>至</span>
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="結束日期"
      :picker-options="pickerOptionsEnd"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
      // 開始結束日期限制
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.endDate) {
            return time.getTime() > new Date(this.endDate).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.startDate) {
            return time.getTime() < new Date(this.startDate).getTime() - 86400000
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>

圖示

date

原文鏈接


免責聲明!

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



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