element组件如何选择年份范围_element日期时间选择器,对日期以及时间进行范围限制...

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 15:46   2379   0

需求:日期是需要当天以及之后七天的时间范围,时间是限制在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()
      )
    }
  }
}

展示效果:

c5f418627986cfa5a71c29abf7877d45.png
日期限制范围后效果

d1fbba84aed8fb2ff0549f27f6155d71.png
时间限制范围后效果

就这样!!!!踩坑记录

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP