js验证可选时间范围的两种方法：用时间戳与Moment.js分别举例实现日期不能跨30天与日期不能跨12个月_js判断年月日分钟时间范围

前提：时间选择器绑定的值类型取Date，开始时间为startTime，结束时间为endTime，当选择时间发生改变时，执行paramsChange方法，在该方法开头验证所选时间是否正确，若正确则进行接口请求，反之弹出错误提示信息。

时间显示维度为日时，正常查询显示如下：

若所选时间范围超过30天，则弹出错误提示信息：

方法一：用时间戳验证时间范围

    paramsChange(row) {
      this.params = {
        ...this.params,
        ...row,
        // 因为时间维度选的是日，所以当前this.params.dimension的值为'DAY'
        // 将结束时间转化为所选日期的23点59分59秒，将开始时间转化为所选日期的0点0分0秒
        endTime: moment(row.endTime)
          .endOf(this.params.dimension)
          .format("YYYY-MM-DD HH:mm:ss"),
        startTime: moment(row.startTime)
          .startOf(this.params.dimension)
          .format("YYYY-MM-DD HH:mm:ss"),
      };
      if (this.params.dimension == "DAY") {
        // 若结束的时间戳减去开始的时间戳的毫秒数大于30天总计的毫秒数，或者结束时间小于开始时间，则弹出错误信息
        if (
          Date.parse(this.params.endTime) - Date.parse(this.params.startTime) >
            30 * 24 * 60 * 60 * 1000 ||
          Date.parse(this.params.startTime) > Date.parse(this.params.endTime)
        ) {
          this.$message.error(
            // this.$t("lang.CannotExceedTime") + " 30 " + this.$t("lang.day") // 项目国际化写法
            '时间范围不能超过30天或结束时间不能小于开始时间'
          );
          this.columns = [];  // 将页面表格初始化
          this.tableData = [];  // 将页面数据初始化
          return;
        }
      }

	  // 方法二：此处插入else if

      // 若验证成功，则执行接口请求操作
      this.search();
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

---

当时间显示维度为月时，若所选时间范围超过12个月，则弹出错误提示信息：

如果用上述的时间戳方法，如何判断是否闰年的365天和366天呢？这样就会多一个很麻烦的步骤。那么这种情况下结合Moment.js提供的方法就会方便多了：

方法二：用Moment.js提供的方法验证时间范围

// 此处的else if插入到上方代码对应的位置

// 因为时间维度选的是月，所以当前this.params.dimension的值为'MONTH'
	  else if (this.params.dimension == "MONTH") {
		// 若结束日期减去12个月的时间后依然大于开始日期，或结束日期小于开始日期，则弹出错误信息
        if (
          moment(row.endTime).subtract(12, "months").toDate() >
            moment(row.startTime).toDate() ||
          moment(row.startTime).toDate() > moment(row.endTime).toDate()
        ) {
          this.$message.error(
            // this.$t("lang.CannotExceedTime") + " 12 " + this.$t("lang.months") // 项目国际化写法
            '时间范围不能超过12个月或结束时间不能小于开始时间'
          );
          this.columns = [];  // 将页面表格初始化
          this.tableData = [];  // 将页面数据初始化
          return;
        }
      }
       // 若验证成功，则执行接口请求操作
       // ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

完工，今天的内容比较水，图未来方便自己ctrl + c v而记录的，希望也能帮助到读到这儿的可爱的你哈~
THX~