vue element 日期选择器 限制在三个月

 从当前时间往前推三个月 

不在时间内置灰  

HTML

<el-form-item>

            <el-date-picker

            v-model="daterange"

            value-format="yyyy-MM-dd"

             type="daterange"

             start-placeholder="开始时间"

              end-placeholder="结束时间"

               :picker-options="pickerOptions1"

               clearable>

                </el-date-picker>

        v-model 绑定的是查询条件，也就是一个数组，所以才会有接下来的watch赋值

 

        

 

data中定义：

data:

 pickerOptions1: {

        disabledDate(time) {

          let curDate = new Date().getTime()

          let three = 90 * 24 * 3600 * 1000

          let threeMonths = curDate - three

          // eslint-disable-next-line no-unused-vars

          var thatDay = time.getTime()

          return time.getTime() > Date.now() || time.getTime() < threeMonths

        },

      },

      pickerOptions2: {

        disabledDate(time) {

          let curDate = new Date().getTime()

          var curD = new Date()

          /* 获取当前月份 */

          var curMonth = curD.getMonth()

          /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */

          curD.setMonth(curMonth + 1)

          /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */

          curD.setDate(0)

          /* 返回当月的天数 */

          var days = curD.getDate()

          let three = days * 24 * 3600 * 1000

          let threeMonths = curDate - three

          return time.getTime() > Date.now() - 8.64e7 || time.getTime() < threeMonths

        },

      },

 watch:

 

// 上传时间
    daterange(val) {
      this.dataForm.createDateScopeStart = val !== null ? val[0] : ''
      this.dataForm.createDateScopeEnd = val !== null ? val[1] : ''
    },