zoukankan      html  css  js  c++  java
  • 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()) ] }
    声明:此资源由本博客收集整理,只用于记录心得和交流学习,请勿用作它途。如有侵权,请联系, 删除处理。
  • 相关阅读:
    crontab 实际的应用
    php 求素数的二种方法
    linux svn配置hooks
    php执行超时(nginx,linux环境)
    php使用strpos,strstr,strchr注意啦,若是数字查找则会当成ASCII码处理
    php 处理大文件方法 SplFileObject
    高德地图定位
    jquery 实现鼠标点击div盒子移动功能
    centos 安装php缓存 apc或zend-opcode
    phpQuery用法总结
  • 原文地址:https://www.cnblogs.com/jzyu/p/14626494.html
Copyright © 2011-2022 走看看