vue2 Element 日期选择时间限制为选择日期的前后30天，开始日期可任意选择

qq_23176171

已于 2024-08-12 10:14:02 修改

阅读量238

点赞数 2

文章标签： vue.js elementui javascript

于 2024-07-18 14:24:24 首次发布

本文链接：https://blog.csdn.net/qq_23176171/article/details/140522016

版权

1.限制条件用到pickerOptions

代码如下

<template>

  <div>

    <el-date-picker

      v-model="dateRange"

      type="daterange"

      range-separator="至"

      start-placeholder="开始日期"

      end-placeholder="结束日期"

      :picker-options="pickerOptions"

    />

  </div>

</template>

<script>

export default {

  data() {

    const that = this

    return {

      dateRange: [],

      curDate: '',

      pickerOptions: {

        onPick: ({ maxDate, minDate }) => {

          that.curDate = minDate.getTime()

          if (maxDate) {

            that.curDate = ''

          }

        },

        disabledDate(time) {

          if (that.curDate) {

            // 限制前后三十天

            const one = 30 * 24 * 3600 * 1000

            const minTime = that.curDate - one

            const maxTime = that.curDate + one

            return time.getTime() < minTime || time.getTime() > maxTime

          }

        }

      }

    }

  }

}

</script>