element-ui中给el-date-picke（日期时间选择）组件添加选取范围

时间 2019-12-27

标签 element date picke 日期时间选择组件添加选取范围繁體版

原文原文链接

data里面：this

pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.form.startDate) {
            return time.getTime() < this.form.startDate || time.getTime() > this.form.startDate.getTime() + 180 * 24 * 3600 * 1000
          } else {
            return time.getTime() > Date.now()
          }
        }
      },

我这里设置的第一个选择了时间日期之后，第二个时间选择器不能选择比第一个时间早的时间且只能选择比第一个时间晚六个月内的月份.net

第一个时间选择器：code

<el-date-picker v-model="form.startDate"
                              type="month"
                              :picker-options="pickerOptions1"
                              placeholder="选择月份">
              </el-date-picker>

第二个时间选择器orm

<el-date-picker v-model="form.endDate"
                              type="month"
                              :disabled='!form.startDate'
                              :picker-options="pickerOptions2"
                              placeholder="选择月份">
              </el-date-picker>

提交时须要对时间进行一些处理，不能设置value-format进行对值的自动化格式blog

let reqParams = JSON.parse(JSON.stringify(this.form))
      if (reqParams.startDate) {
        reqParams.startDate = new Date(reqParams.startDate).getFullYear() + '-' + (Number(new Date(reqParams.startDate).getMonth() + 1))
      }
      if (reqParams.endDate) {
        reqParams.endDate = new Date(reqParams.endDate).getFullYear() + '-' + (Number(new Date(reqParams.endDate).getMonth() + 1))
      }

更多内容参考https://blog.csdn.net/z9061/a...get