• 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()) ] }
    声明:此资源由本博客收集整理,只用于记录心得和交流学习,请勿用作它途。如有侵权,请联系, 删除处理。
  • 相关阅读:
    cf581B Luxurious Houses
    cf581A Vasya the Hipster
    2015.9.11模拟赛 codevs4162 bzoj1774【无双大王】
    2015.9.11模拟赛 codevs 4160【会玩的】
    2015.9.11模拟赛 codevs 4159【hzwer的迷の数列】
    bzoj2019 [Usaco2009 Nov]找工作
    贪吃蛇!!!
    bzoj3850 ZCC Loves Codefires
    cf509E Pretty Song
    cf509C Sums of Digits
  • 原文地址:https://www.cnblogs.com/jzyu/p/14626494.html
Copyright © 2020-2023  润新知