Moment.js 计算时间差

影子信息

于 2024-05-16 17:54:54 发布

阅读量582

点赞数 2

分类专栏：项目架构文章标签： javascript 类库

本文链接：https://blog.csdn.net/weixin_45024453/article/details/138968038

版权

项目架构专栏收录该内容

16 篇文章 0 订阅

订阅专栏

理论知识：Moment.js 日期处理类库

实现效果：使用momentjs中的方法计算时间差。

第1步：获取当前日期时间；

第2步：计算两者时间差。

官方链接：momentjs官方链接

实际代码：

//第1步，获取当前日期
let formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');

//第2步，计算时间差
var a = moment(formattedDate);
var b = moment(apiResData);
var timeDiff =  a.diff(b, 'years', true); // 1.75

备注：

apiResData可以是任意之，数据格式是：2024-05-16 16:14:32

写到这儿就完成了，之后是使用的加强版。

实现效果：对数组接口返回的所有数据，筛选时间属性值。时间范围有4个：1年以内、1~2年、2~3年、3年以上。筛选au满足其中一个乃至于多个时间范围。

效果图：

核心代码：

var res = data.data;
      let formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
      var a = moment(formattedDate);
      var b 
      var timeDiff
      var cLength=[
        { 
          index:0,
          title: '1年内',
          minVal:0,
          maxVal:1,
          color: '#000',
          bgColor:'rgba(1,255,1,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_0Year',
        },
        { 
          index:3,
          title: '1~2年',
          minVal:1,
          maxVal:2,
          color: '#000',
          bgColor: 'rgba(255,255,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_1Year',
        },
        { 
          index:2,
          title: '2~3年',
          minVal:2,
          maxVal:3,
          color: '#000',
          bgColor: 'rgba(255,192,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_2Year',
        },
        { 
          index:1,
          title: '3年以上',
          minVal:3,
          maxVal:100,
          color: '#fff',
          bgColor: 'rgba(214,20,21,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_3Year',
        },
      ]
      // 添加年份筛选
      var filteredRes = res.filter(function (v) {
          b = moment(v.surend);
          timeDiff = a.diff(b, 'years', true); 
          return cLength.some(function(range) {
            return _.inRange(timeDiff, range.minVal, range.maxVal);
          });
      });
console.log('添加年份筛选',filteredRes);

其它，接口数据如下:

//接口请求到的数据
[
    {
        "guid": "8d0357b9-58f8-4fa0-9a00-949c29d3b1e2",
        "projectname": "《雷州湾》检查测量；《新寮岛至硇洲岛》检查测量；《雷州港》检查测量",
        "projectno": "J2023-011",
        "projecttyp": "规划任务",
        "surveyproj": "高斯-克吕格投影",
        "coordinate": "CGCS2000",
        "surveytype": "检查测量",
        "surend": "2023-07-19 00:00:00",
        "depth": 0
    },
    {
        "guid": "e1203599-84e6-4edc-86e7-e9b786000699",
        "projectname": "《雷州湾》检查测量；《新寮岛至硇洲岛》检查测量；《雷州港》检查测量",
        "projectno": "J2023-011",
        "projecttyp": "规划任务",
        "surveyproj": "高斯-克吕格投影",
        "coordinate": "CGCS2000",
        "surveytype": "检查测量",
        "surend": "2023-07-11 00:00:00",
        "depth": 0
    },
    {
        "guid": "3fc76d8c-996c-4c0a-8a7f-06847ea1e4be",
        "projectname": "《硇洲岛及附近》基本测量",
        "projectno": "G2020-004",
        "projecttyp": "规划任务",
        "surveyproj": "高斯-克吕格投影",
        "coordinate": "CGCS2000",
        "surveytype": "基本测量",
        "surend": "2020-09-03 00:00:00",
        "depth": 0
    }
]