带快捷项时间选择器相关问题总结

一.带快捷项时间选择器相关问题总结

1.默认初始时间为之前的到期时间，并且之前的时间禁止输入。

 <template>
<el-form-item label="开通年限:" :required="true">
          <el-date-picker
            v-model="userCountDate"
            type="daterange"
            align="right"
            :clearable="false"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="changeTime"
           
          >
          </el-date-picker>
        </el-form-item>
</template>
import moment from "moment";
export default {
    data(){
        return{
        startTime: "",
        endTime: "",
        endDate："",
        pickerOptions: {
          //时间段的禁用
        disabledDate: (time) => {
          return this.disabledDate(time);
        },
          //快捷键的定义
        shortcuts: [
          {
            text: "一年",
            onClick: (picker) => {
              return this.onClick(picker, 1);
            },
          },
          {
            text: "两年",
            onClick: (picker) => {
              return this.onClick(picker, 2);
            },
          },
          {
            text: "三年",
            onClick: (picker) => {
              return this.onClick(picker, 3);
            },
          },
          {
            text: "四年",
            onClick: (picker) => {
              return this.onClick(picker, 4);
            },
          },
          {
            text: "五年",
            onClick: (picker) => {
              return this.onClick(picker, 5);
            },
          },
        ],
      },
          },
        }
    },
      

    methods：{
        //对快捷选项的定义
        onClick(picker, val) {
      const end = new Date(this.endDate);
      const start = new Date(this.endDate);
      end.setFullYear(end.getFullYear() + val);
      return picker.$emit("pick", [start, end]);
    },
     //对刚刚进入的时间的定义
   getTime() {
      this.endDate = this.$route.query.endDate;
      const end = new Date(this.endDate);
      const start = new Date(this.endDate);
      end.setFullYear(end.getFullYear() + 1);
      this.userCountDate = [start, end];
      const format = "YYYY-MM-DD HH:mm:ss";
      this.productFormValue.startTime = moment(start).format("YYYY-MM-DD HH:mm:ss");
      this.productFormValue.endTime = moment(end).format("YYYY-MM-DD HH:mm:ss");
    },
     //禁用时间的定义
    disabledDate(time) {
      return time.getTime() < new Date(this.endDate).getTime();
    },
     //改变时间选择器的定义
     changeTime(val) {
      const format = "YYYY-MM-DD HH:mm:ss";
      const timeArr = val.map((item) =>
        moment(item).format("YYYY-MM-DD HH:mm:ss")
      );
      this.productFormValue.startTime = timeArr[0] ? timeArr[0] : "";
      this.productFormValue.endTime = timeArr[1] ? timeArr[1] : "";
    },
}