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()
      )
    }
  }
}

展示效果：

就这样！！！！踩坑记录

最后

以上就是幸福小土豆为你收集整理的element日期时间选择器，对日期以及时间进行范围限制（踩坑记录！！！）的全部内容，希望文章能够帮你解决element日期时间选择器，对日期以及时间进行范围限制（踩坑记录！！！）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。