element el-date-picker 限制范围90天,当天不可选

37 篇文章 0 订阅
6 篇文章 0 订阅
<template>
    <div class="table">
        <div class="crumbs">
            <el-row class="search_con" :gutter="24" style="margin-bottom:20px;display: flex;align-items: center;">
                <el-col :span="3" style="padding-right: 0px;width:81px;">
                  <label style="color:#333;font-size: 14px;">统计日期:</label>
                </el-col>
                <el-col :span="5">
                  <el-date-picker
                    :clearable="false"
                    :editable="false"
                    v-model="datePick"
                    type="daterange"
                    placeholder="选择日期范围"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    @change="formatDate">
                  </el-date-picker>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    let that = this
    let _minTime = null
    let _maxTime = null
    return {
      datePick: '',
      params: {
          startTime: '', // 开始时间
          endTime: '', // 结束时间
      },
      pickerOptions: {
        onPick(time){
          if (!time.maxDate) {
            let timeRange = 89*24*3600*1000
            _minTime = time.minDate.getTime() // 最小时间
            _maxTime = time.minDate.getTime() + timeRange // 最大时间
          } else {
            _minTime = _maxTime = null
          }
        },
        disabledDate(time) {
          let afterToday = Date.now() - 3600 * 1000 * 24
          if (_maxTime) {
            _maxTime = (_maxTime <= afterToday) ? _maxTime : afterToday 
          } else {
            return time.getTime() > (Date.now() - 3600 * 1000 * 24)
          }
          if (_minTime && _maxTime) {
            return time.getTime() < _minTime || time.getTime() > _maxTime
          }
        },
        shortcuts: [{
          text: '最近7天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近15天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近30天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    //设置默认日期7天
    defaultDate (){
      let start = new Date().getTime() - 3600 * 1000 * 24 * 7
      let end = new Date().getTime() - 3600 * 1000 * 24
      this.datePick = [start, end]
    },
    formatDate (val) {
      let arr = val.split('至')
      this.params.startTime = arr[0]
      this.params.endTime = arr[1]
    },
  },
  mounted() {
    this.defaultDate()
  }
}
</script>
<style lang="less" scoped>
</style>

效果图:

dayer

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
element el-date-picker可以通过设置picker-options属性来限制择时间的范围。例如,通过设置disabledDate函数可以限制只能当天之前的时间,代码如下: ``` <el-date-picker class="mydelayTime" v-model="form.secondPriceDelayTime" type="datetime" placeholder="择日期时间" :start-placeholder="startPlaceholder" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" @change="changeSecondPriceDelayTime"></el-date-picker> ``` 在data中设置pickerOptions对象,其中disabledDate函数可以用来限制范围,示例代码如下: ``` this.pickerOptions = { disabledDate: (time) => { return (time.getTime() < Date.now() - 8.64e7*3) //限制只能择三天以后的时间 }, // selectableRange:pickerDate ? `${hourRange}:${minRange}:${secondRange} - 23:59:59` : '00:00:00 - 23:59:59', } ``` 通过以上设置,el-date-picker组件就可以限制择时间范围为三天以后的时间。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue element-ui el-date-picker限制择时间为当天之前的代码](https://download.csdn.net/download/weixin_38569722/12932458)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [element el-date-picker限制时间范围](https://blog.csdn.net/qq_37299479/article/details/129265457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值