element日期时间选择器,对日期以及时间进行范围限制(踩坑记录!!!)

需求:日期是需要当天以及之后七天的时间范围,时间是限制在10点到19点

踩坑记录:在做这个需求时,出现一个对于我来说一个巨大的坑,我在写的时候,发现selectableRange不生效,搜索很多方法都没有用,然后偶然一个契机让我发现竟然是因为element框架版本问题,更新之后就可以使用了,真的是,知道原因之后我裂开了

html部分

    <el-date-picker
      class="dateClass"
      v-model="aa"
      type="datetime"
      :picker-options="pickerOptions"
      placeholder="请选择时间"
      style="width: 30%"
    >
    </el-date-picker>

js部分

export default {
  data () {
    return {
      aa: '',
      pickerOptions: {
        // 限制时间
        selectableRange: ['12:00:00 - 23:59:59'],
        // 限制日期
        disabledDate: this.disabledDate
      }
    }
  },
  methods: {
    disabledDate (time) {
      const dateTime = new Date()
      const startTime = dateTime.setDate(dateTime.getDate() - 1)
      const endTime = dateTime.setDate(dateTime.getDate() + 7)
      return (
        time.getTime() < new Date(startTime).getTime() ||
        time.getTime() > new Date(endTime).getTime()
      )
    }
  }
}

展示效果
日期限制范围后效果

时间限制范围后效果

就这样!!!!踩坑记录

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值