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

 

<!--  class="demonstration">可以选择时间的-->
<!--  class="datetimerange">不可以选择时间的-->
<!-- 主控件 -->
        <p style="margin-top:12px;margin-right: 5px">开始时间</p>
        <DatePicker
          type="datetime"
          size="large"
          v-model="startDate"
          placeholder="请选择开始时间"
          style="width: 15%;margin-right:10px"
          aria-readonly="true"
          :editable="false"
          @on-ok="startchange"
        />

        <p style="margin-top:12px;margin-right: 5px">结束时间</p>
        <DatePicker
          type="datetime"
          size="large"
          v-model="endDate"
          placeholder="请选择结束时间"
          style="width: 15%;margin-right:10px"
          aria-readonly="true"
          :editable="false"
          @on-ok="endchange"
        />

//参数字段还是要设置的。
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;
  }