日期选择器

日期选择器

参考：https://www.jianshu.com/p/3683a931250e

element 提供了开始时间-结束时间的时间选择器，但是有个不太方便的一点就是返回的是一个数组。以下方式是通过两个时间选择器绑定两个控件，实现开始时间早于结束时间，结束时间能晚于开始时间。

组件：

<el-table-column :label="td('时间')" prop="remark">
    <template slot-scope="scope">
		<el-date-picker
                v-model="scope.row.beginTime"
                size="mini"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsStart"
                type="date"
                placeholder="开始时间"
                range-separator="-"
                @change="changeStart(scope.row)"
                ></el-date-picker>
				-
		<el-date-picker
                v-model="scope.row.endTime"
                size="mini"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptionsEnd"
                type="date"
                placeholder="结束时间"
                range-separator="-"
                @change="changeEnd(scope.row)"
                ></el-date-picker>
    </template>
</el-table-column>

数据定义：

 	// 日期控件
      pickerOptionsStart: {},
      pickerOptionsEnd: {},
      startDate: "",
      endDate: "",

方法：

// 获取时间
    changeStart(row) {
      this.startDate = row.beginTime;
      this.endDate = row.endTime;
      this.changeStartDate(row);
    },
    // 获取时间
    changeEnd(row) {
      this.startDate = row.beginTime;
      this.endDate = row.endTime;
      this.changeEndDate(row);
    },
    // 清除开始时间
    RemoveStartDate(row) {
      row.beginTime = "";
    },
    // 清除结束时间
    RemoveEndDate(row) {
      row.endTime = "";
    },
    // 开始时间与结束时间判断
    // 开始时间事件
    changeStartDate(row) {
      // 限制开始时间
      if(this.endDate != ""){
        if(this.startDate >= this.endDate){
          this.$message("开始时间必须小于结束时间！");
          // 清除开始时间
          this.RemoveStartDate(row);
        }
      }
      this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd, {
        disabledDate: (time) => {
          if(this.startDate) {
            return time.getTime() < this.startDate;
          }
        },
      })
    },
    // 结束时间事件
    changeEndDate(row) {
      // 限制开始时间
      if(this.startDate != ""){
        if(this.endDate <= this.startDate){
          this.$message("结束时间必须大于结束时间！");
          // 清除结束时间
          this.RemoveEndDate(row);
        }
      }
      this.pickerOptionsStart = Object.assign({},this.pickerOptionsEnd, {
        disabledDate: (time) => {
          if(this.endDate) {
            return time.getTime() > this.endDate;
          }
        },
      })
    },