Element日期区间选择器限制选择范围

日期选择器:限制最大范围3个月,超出的不可选,超出当前天也不可选

复制代码
              <el-form-item label="统计时间" prop="day_section">
                <el-date-picker
                  v-model="query.day_section"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  @change="handleChange"
                />
              </el-form-item>
复制代码
复制代码
  data() {
    return {
      // 用户搜索关键字
      query: {
        day_section: []
      },
      // 日期选择器做选择限定
      startDate: '',
      pickerOptions: {
        // onPick:选中日期时的回调函数,在这里对选中的日期进行处理{maxDate:后选中日期;minDate:第一个选中的日期}
        onPick: ({ maxDate, minDate }) => {
          this.startDate = minDate && minDate.getTime()
          if (maxDate) {
            // 选中后一个时,要把第一个的赋值清空
            this.startDate = ''
          }
        },
        disabledDate: (time) => {
          // 选中第一个后,后一个前后3个月可选,超出的不可选,超出当前天也不可选,这里的月份按需求设定
          const minTime = new Date(this.startDate).setMonth(new Date(this.startDate).getMonth() - 3)
          const maxTime = new Date(this.startDate).setMonth(new Date(this.startDate).getMonth() + 3)
          return time.getTime() > Date.now() || (this.startDate ? (time.getTime() < minTime || time.getTime() > maxTime) : false)
        }
      }
    }
  }
复制代码
  created() {
   // 默认当前的前一个月
this.query.day_section = [ new Date(new Date().setMonth(new Date().getMonth() - 1)), new Date(Date.now()) ] }

 

posted @   _JZYU  阅读(1262)  评论(0编辑  收藏  举报
编辑推荐:
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
阅读排行:
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?
点击右上角即可分享
微信分享提示