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

2024年2月9日 192次阅读 来源: 弱鸡的前端程序员

data里面：

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

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

第一个时间选择器：

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

第二个时间选择器

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

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

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…

    原文作者：弱鸡的前端程序员
    原文地址: https://segmentfault.com/a/1190000019848216
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞