初始14天时间限制, 选择时间范围限制31天两种情况min max( 必须先选起始时间和非必须 )

234 阅读2分钟

一. init准备

1.时间选择配置项
需要同步的数据包括: 1. 页面显示时间value值startTime、endTime 2. 时间选择器的时间value值

startTime: "", //*gre: 页面时间
endTime: "",
segmentPickerConfig: [
    {
      is: "cube-date-picker",
      title: "开始时间",
      format: { year: "YYYY年", month: "MM月", date: "DD日" },
      value: new Date(),
      min: new Date(1932, 0, 1),
      max: new Date(),
    },
    {
      is: "cube-date-picker",
      title: "结束时间",
      format: { year: "YYYY年", month: "MM月", date: "DD日" },
      value: new Date(),
      min: new Date(1932, 0, 1),
      max: new Date(),
    }
], //*gre: 时间选择器option

2.initPage

    // todo: initPage
    async initPage() {
      this.loading = true;
      //*gre: 页面显示的时间
      var curDate = new Date();
      this.startTime = curDate.getTime() - 1000 * 60 * 60 * 24 * 13; //14天之前
      this.endTime = curDate.getTime();
      // *gre: 时间选择器参数准备
      this.segmentPickerConfig[0].value =
        new Date(this.startTime) || new Date();
      this.segmentPickerConfig[1].value = new Date(this.endTime) || new Date();
      // *gre: 初始化时间选择器
      this.initTimePickerSelector();

      // *gre: 获取传感和控制设备数据,并得到虫情孢子设备状态
      const { hasBug, hasSpore } = await this.getMetricThirdListController();
      this.hasBug = hasBug;
      this.hasSpore = hasSpore;
      if (hasBug || hasSpore) {
        // *gre: 获取虫情孢子设备数据
        await this.getThirdDeviceBugListControlle();
      }
      this.loading = false;
    },

3.action

    handleOpenDatePicker() {
      if (!this.loading) {
        this.segmentPickerConfig[0].value = this.startTime
          ? new Date(this.startTime)
          : new Date();
        this.segmentPickerConfig[1].value = this.endTime
          ? new Date(this.endTime)
          : new Date();
        if (this.$dateSegmentPicker) {
          this.$dateSegmentPicker.$updateProps({
            data: this.segmentPickerConfig,
          });
          this.$dateSegmentPicker.show();
        }
      }
    },

二. 两种时间限制

1.必须先选起始时间

    // *gre: 初始化时间选择器
    initTimePickerSelector() {
      this.$dateSegmentPicker = this.$createSegmentPicker({
        data: this.segmentPickerConfig,
        onNext: (idx, selectedDate) => {
          const { minTime, maxTime } = this.endTimeMinAndMax(selectedDate);
          this.segmentPickerConfig[1].min = minTime;
          this.segmentPickerConfig[1].max = maxTime;
          this.$dateSegmentPicker.$updateProps({
            data: this.segmentPickerConfig,
          });
        },
        onSelect: async (selectedDates) => {
          this.loading = true;
          //*gre: 页面时间
          this.startTime = selectedDates[0];
          this.endTime = selectedDates[1];
          // *gre: 时间选择器时间
          this.segmentPickerConfig[0].value = selectedDates[0] || new Date();
          this.segmentPickerConfig[1].value = selectedDates[1] || new Date();
          this.$dateSegmentPicker.$updateProps({
            data: this.segmentPickerConfig,
          });
          this.thirdBugOrSporeList = [];
          await this.getThirdDeviceBugListControlle();
          this.loading = false;
        },
      });
    },
  
    起始时间限制如配置项里 min: new Date(1932, 0, 1) 和 max: new Date(),起始随便选,结束时间则如下
    //*gre: 结束时间的 min和max, selectedDate是当前选择的起始时间, 时间限制:一个月31天, dateNumber=30
    endTimeMinAndMax(selectedDate, dateNumber = 30) {
      let minTime, maxTime;
      let selected_startTime = selectedDate.getTime();
      let todayTime = new Date().getTime();
      if (selected_startTime < todayTime) {
        let saveEndMaxTime =
          selected_startTime + 1000 * 60 * 60 * 24 * dateNumber;
        saveEndMaxTime =
          saveEndMaxTime > todayTime ? todayTime : saveEndMaxTime;
        minTime = selectedDate;
        maxTime = new Date(saveEndMaxTime);
      } else if (selected_startTime === todayTime) {
        minTime = selectedDate;
        maxTime = selectedDate;
      }
      return { minTime, maxTime };
    },

2.起始结束时间都可以先选择

    startTimeMinAndMax(selectedEndTime, dateNumber = 30) {
      let minTime, maxTime;
      if (selectedEndTime) {
        const saveStartMinTime =
          new Date(selectedEndTime).getTime() -
          1000 * 60 * 60 * 24 * dateNumber;
        minTime = new Date(saveStartMinTime);
        maxTime = new Date(selectedEndTime);
      } else {
        minTime = new Date(1932, 0, 1);
        maxTime = new Date();
      }
      return { minTime, maxTime };
    },
    
    endTimeMinAndMax(selectedStartTime, dateNumber = 30){
      let minTime, maxTime;
      let todayTime = new Date().getTime();
      if (selectedStartTime) {
        let saveEndMaxTime =
          new Date(selectedStartTime).getTime() +
          1000 * 60 * 60 * 24 * dateNumber;
          saveEndMaxTime =
          saveEndMaxTime > todayTime ? todayTime : saveEndMaxTime;
        minTime = new Date(selectedStartTime);
        maxTime = new Date(saveEndMaxTime);
      } else {
        minTime = new Date(1932, 0, 1);
        maxTime = new Date();
      }
      return { minTime, maxTime };
    },