elementUI开始结束日期限制

最新推荐文章于 2023-01-06 10:56:34 发布

不想上班第N天

最新推荐文章于 2023-01-06 10:56:34 发布

阅读量411

点赞数

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/aiiiszrh/article/details/122122199

版权

<template>
  <div class="container">
    <div class="filter-name">日期：</div>
    <el-date-picker style="width: 140px" type="date" v-model="searchPrCat.startDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" class="filter-item" />
    <div class="filter-name" style="margin:0 10px;padding-top:10px">至</div>
    <el-date-picker class="filter-item" :clearable="false" v-model="searchPrCat.endDate" type="date" style="width:140px" :picker-options="endDateRange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchPrCat: {
        startDate: '',
        endDate: '',
      },

       // 开始日期
       startDateRange: {
        disabledDate: time => {
          let endDateVal = this.searchPrCat.startDate
          if (endDateVal) return time.getTime() > new Date(endDateVal).getTime() + 31 * 8.64e7
        }
      },
      // 结束日期限制
      endDateRange: {
        disabledDate: time => {
          let endDateVal = this.searchPrCat.startDate
          if (endDateVal) {
            return (time.getTime() > new Date(endDateVal).getTime() + 31 * 8.64e7 ||time.getTime() < new Date(endDateVal).getTime() - 8.64e7)
          }
        },
      },
    }
  },
}
</script>

<style>
    .container{
        display: flex;
    }
</style>