el-data-picker时间选择器最多选择7天,且只能选当前之前时间

<el-date-picker
          v-model="form.statisticsTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          prefix-icon=0
        />
// 日期选择七天内,且当前时间后不能选择
      pickerOptions: {
        onPick: time => {
          // 选择开始时间未选择结束时间
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate: time => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 1000 * 60 * 60 * 24 * 7;
          if (!timeOptionRange) {
            return time.getTime() > Date.now() - 8.64e6
          }
          if ((timeOptionRange.getTime() + secondNum) > (Date.now() - 8.64e6)) {
            return time.getTime() > Date.now() - 8.64e6 || time.getTime() < timeOptionRange.getTime() - secondNum;
          }
          return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
        }
      },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-date-picker组件可以通过设置picker-options属性来限制选择范围。根据引用\[1\]和引用\[2\]的内容,你可以使用以下代码来限制el-date-picker选择范围为7: ```html <el-date-picker v-model="actDate" :picker-options="{ shortcuts: \[ { text: '最近7', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 7 * 24 * 60 * 60 * 1000); picker.$emit('pick', \[start, end\]); } } \] }" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp"></el-date-picker> ``` 这段代码中,我们通过设置picker-options属性来定义了一个快捷项"最近7",当用户点击该项时,会自动选择最近7日期范围。具体实现是通过在onClick函数中计算出开始日期和结束日期,然后通过picker.$emit('pick', \[start, end\])来触发选择日期范围的事件。 希望这个回答对你有帮助! #### 引用[.reference_title] - *1* *2* [vue el-date-picker 设置可近30时间范围为7](https://blog.csdn.net/HH18700418030/article/details/130409189)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [datepicker 限制只能选择7的两种方式](https://blog.csdn.net/qq_37025418/article/details/113752252)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值