el-date-picker限制起期止期

原由

写这个是为了控制用户选择不正确的起期，止期。

业务代码

<div style="display: inline">
    <el-date-picker v-model="filters.column.create_start_date" :picker-options="pickerBeginDateBefore" :format-value="dateConfig.formatValue" :type="dateConfig.type" :style="dateConfig.dateStyle" placeholder="开始日期" @change="changeStartTime"/>
    <span>至</span>
    <el-date-picker v-model="filters.column.create_end_date" :picker-options="pickerBeginDateAfter" :format-value="dateConfig.formatValue" :type="dateConfig.type" :style="dateConfig.dateStyle" placeholder="结束日期" @change="changeEndTime"/>
  </div>

上述代码实现了两个日期选择器。具体的值解析可以往下看或者也可以直接查看element-ui官网。

日期选择对应的值

父组件的传值

因为我这是写的一个组件，所以这块是父组件需要传过来的值。

dateConfig: {
      type: Object,
      default() {
        return {
          type: 'date',// 日期选择器类型
          formatValue: 'YYYY-MM-dd',// 日期现在的格式
          startTime: '', // 开始时间
          endTime: '', // 结束时间
          dateStyle: { // 日期样式
            width: '174px'
          }
        }
      }
    }

子组件本身的值

 filters: { // 因为子组件需要修改对应的值，所以需要一个新的
        column: {
          create_start_date: "",
          create_end_date: "",
        },
      },
      pickerBeginDateBefore: {
        disabledDate: (time) => {// 设置禁用状态
          let beginDateVal = this.filters.column.create_end_date;
          if (beginDateVal) {
            // 需要转时间戳比较
            return (
              time.getTime() >
              moment(beginDateVal, this.dateConfig.formatValue).valueOf()
            );
          }
        },
      },
      pickerBeginDateAfter: {// 设置禁用状态
        disabledDate: (time) => {
          let beginDateVal = this.filters.column.create_start_date;
          if (beginDateVal) {
            return (
              time.getTime() <
              moment(beginDateVal, this.dateConfig.formatValue).valueOf()
            );
          }
        },
      },

pickerBeginDateBefore，pickerBeginDateAfter其实很好理解，就是设置起期不能选比止期晚的，止期不能选比起期早的。

业务逻辑

	changeStartTime(val) {
      let startTime = moment(val).format("YYYY-MM-DD");
      this.filters.column.create_start_date = startTime;
      this.$emit("getStartTime", startTime);
      // console.log('开始日期',)
    },
    changeEndTime(val) {
      let endTime = moment(val).format("YYYY-MM-DD");
       this.filters.column.create_end_date = endTime;
      // console.log('结束日期',moment(val).format("YYYY-MM-DD HH:mm:ss"))
      this.$emit("getEndTime", endTime);
    },

提供了选择起期，跟选择止期的方法，对应同步到父组件。（父组件接收就不具体写了）

因为日期处理使用了moment,所以使用前需要安装对应的依赖。