element-ui DatePicker日期范围选择动态设置禁选日期

之前看到群里又小伙伴提出了一个DatePicker日期范围组件的一个问题
用图描述大概就是选择开始日期13号后,只能选择13号前一周和后一周的日期,其他日期处于禁止选择状态。

image

先去看了下element的相关文档,找到了一个点击选择日期后相关回调函数onPick传送门

image

根据这个回调函数可以拿到点击的开始时间是,然后根据点击的开始时间在picker-optionsdisabledDate中处理需禁用的日期,由于这个日期是动态不确定的,所以将picker-options放在computed里面去处理,大致下面这个样子,可以获取到data中的数据

  computed: {
    pickerOptions(){
      let _this = this
      return {
        disabledDate(time) {
          //此处可以根据_this获取到data中定义的数据
        },
        onPick({maxDate, minDate}) {


        }
      }
    }
  }

onPick选择第一个日期的时候能够取到的是minDatemaxDate是取不到的,将取到的minDate存下来this.minDate = minDate,在disabledDate里面根据minDate进行相关处理

computed: {
  pickerOptions(){
    let _this = this
    return {
      disabledDate(time) {
        const times =  86400000 * 7//一周的毫秒数
        let curSelectTime = new Date(_this.minDate).getTime()
        let before = curSelectTime - times//前一周毫秒数
        let after = curSelectTime + times//后一周毫秒数
        return time.getTime() > after || time.getTime() < before
      },
      onPick({maxDate, minDate}) {
        if (!maxDate) {
          _this.minDate = minDate
        }
      }
    }
  }
}

动图预览:

image

在线预览:

暂无评论

发送评论编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇