vue+element开始时间结束时间控制时间范围

 

        
开始时间
        

        
结束时间
        

//参数字段还是要设置的。
data() {
    return {

      input: "", // 搜索框内容
      startDate: "", // 搜索框内容
      endDate: "",
      limit: 10,
      pageSizes: [10, 20],

    };
  },

//添加时间控件点击事件，选择了 其中一个时间另一个自动显示，用来控制选择的时间范围。
methods: {
    

    startchange() {
      // 确定时间范围之后触发的函数
      this.endDate = new Date(
        new Date(this.startDate).getTime() + 24 * 60 * 60 * 1000
      );
    },
    endchange() {
      // 确定时间范围之后触发的函数
      //如果选择的日期跨年则需与开始日期同年
      this.startDate = new Date(
        new Date(this.endDate).getTime() - 24 * 60 * 60 * 1000
      );
    },
}

// 页面加载完毕后触发的事件,设置页面默认显示时间
  mounted() {
    let startTime1 = new Date(
      new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000
    ); // 前一天0点
    let endTime1 = new Date(
      new Date(new Date().toLocaleDateString()).getTime() 
    ); // 前一天23:59
    var vm = this;
    vm.startDate = startTime1; // 默认显示时间
    vm.endDate = endTime1;
  }