vue 2.0 前端比较日期数据大小

最新推荐文章于 2024-06-03 15:44:17 发布

不染-9732

最新推荐文章于 2024-06-03 15:44:17 发布

阅读量3k

点赞数

分类专栏： vue Js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43564810/article/details/127663500

版权

vue 同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

前端比较日期数据大小

使用场景：在没有后端的情况下，我们需要一个日期搜索的功能，大体思路：将yyyy-MM-dd的时间字符串转换成时间戳进行比较

1. 日期组件

这里的日期选择器使用的是element-ui中的el-date-picker组件，在调用的时候对组件输出日期格式进行了规范 ==》 value-format=“yyyy-MM-dd” 可根据自己需求输出为： value-format=“yyyy-MM-dd hh:mm:ss”

      <template>
        <span>数据创建时间：</span>
        <el-date-picker
          v-model="value3"
          type="daterange"
          value-format="yyyy-MM-dd"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </template>

2. 打印组件输出结果：v-model=“value3” value3以数组形式输出

在这里插入图片描述

3.将 yyyy-MM-dd 格式的数据转换为时间戳：

let 开始时间 = Date.parse(new Date(value[0]));
let 结束时间 = Date.parse(new Date(value[1]));

    value3: {
      handler(newVal, oldVal) {
        let startTime = Date.parse(new Date(newVal[0]));  //被转换格式最好是yyyy-MM-dd
        let endTime = Date.parse(new Date(newVal[1]));
        this.tableData = this.oldTableData;

        // 判断其他筛选条件是否存在
        if (this.value1) {
          this.chooseDataType(this.value1);
        }
        if (this.value2) {
          this.chooseType(this.value2);
        }
        if (!newVal) {
          this.clearOne();
        } else {
          this.chooseTime(startTime, endTime);
        }
      },
      deep: true
    }

4.获取tableData数据中的日期转换成时间戳判断是否在所选时间范围内

这里操作的是nowTime

    // 日期筛选
    chooseTime(startTime, endTime) {
      let newDataList = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let nowTime = Date.parse(new Date(this.tableData[i].createTime));
        if (nowTime > startTime && nowTime < endTime) {
          newDataList.push(this.tableData[i]);
        }
      }
      this.tableData = newDataList;
    },