首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >测试需求平台15-非常好用的前端时间库Moment.js

测试需求平台15-非常好用的前端时间库Moment.js

作者头像
MegaQi
发布2023-10-21 19:22:07
发布2023-10-21 19:22:07
44300
代码可运行
举报
运行总次数:0
代码可运行

✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版,拥抱Vue3.0将前端框架替换成字节最新开源的arco.design,其中约60%重构和20%新增内容,定位为从 0-1手把手实现简单的测试平台开发教程,内容将囊括基础、扩展和实战,由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。

Moment.js

JavaScript 日期处理类库( http://momentjs.cn/ ),它提供了一些经常用的时间处理方法,在node.js 和 浏览器中都可以直接使用。

安装和使用

在我们前端项目中安装和引用如下:

代码语言:javascript
代码运行次数:0
运行
复制
# 终端安装依赖(笔者测试的最新版本为2.24.0)
npm install moment

# 导入依赖
import moment from "moment";

也可通过require定义,或html直接引用

代码语言:javascript
代码运行次数:0
运行
复制
// require定义
var moment = require('moment');
moment().format();

// 浏览器script引用
<script src="moment.js"></script>
<script>
    moment().format();
</script>

常用方法

格式化时间

通过format('字符串') 对日期进行格式化。

代码语言:javascript
代码运行次数:0
运行
复制
// 默认locale语言为cn
moment().format('MMMM Do YYYY, h:mm:ss a'); // August 13th 2022, 2:19:01 pm
moment().format('dddd');                    // Saturday
moment().format("MMM Do YY");               // Aug 13th 22

// 更改本地语言为简体中文
moment.locale('zh-cn')
const res = moment().format('YYYY-MM-DD HH:mm'); // 2022-08-13 14:32

格式字符串很多,可以根据需要自行组合

http://momentjs.cn/docs/#/displaying/format/

令牌

输出

月份

M

1 2 ... 11 12

Mo

1st 2nd ... 11th 12th

MM

01 02 ... 11 12

MMM

Jan Feb ... Nov Dec

MMMM

January February ... November December

季度

Q

1 2 3 4

Qo

1st 2nd 3rd 4th

月份的日期

D

1 2 ... 30 31

Do

1st 2nd ... 30th 31st

DD

01 02 ... 30 31

年份的日期

DDD

1 2 ... 364 365

DDDo

1st 2nd ... 364th 365th

DDDD

001 002 ... 364 365

星期几

d

0 1 ... 5 6

do

0th 1st ... 5th 6th

dd

Su Mo ... Fr Sa

ddd

Sun Mon ... Fri Sat

dddd

Sunday Monday ... Friday Saturday

星期几(语言环境)

e

0 1 ... 5 6

星期几(ISO)

E

1 2 ... 6 7

年份的星期

w

1 2 ... 52 53

wo

1st 2nd ... 52nd 53rd

ww

01 02 ... 52 53

年份的星期(ISO)

W

1 2 ... 52 53

Wo

1st 2nd ... 52nd 53rd

WW

01 02 ... 52 53

年份

YY

70 71 ... 29 30

YYYY

1970 1971 ... 2029 2030

Y

1970 1971 ... 9999 +10000 +10001

周年

gg

70 71 ... 29 30

gggg

1970 1971 ... 2029 2030

周年(ISO)

GG

70 71 ... 29 30

GGGG

1970 1971 ... 2029 2030

子午线

A

AM PM

a

am pm

小时

H

0 1 ... 22 23

HH

00 01 ... 22 23

h

1 2 ... 11 12

hh

01 02 ... 11 12

k

1 2 ... 23 24

kk

01 02 ... 23 24

分钟

m

0 1 ... 58 59

mm

00 01 ... 58 59

秒钟

s

0 1 ... 58 59

ss

00 01 ... 58 59

小数秒钟

S

0 1 ... 8 9

SS

00 01 ... 98 99

Unix 时间戳

X

1360013296

Unix 毫秒时间戳

x

1360013296123

3.2.2 相对时间

通过fromNowtoNowto等方法计算相对时间

代码语言:javascript
代码运行次数:0
运行
复制
// 当前时间与北京奥运开幕时间  xx年前
moment("20080808", "YYYYMMDD").fromNow();

// 到现在为止已距当天/小时已经过去
moment().startOf('day').fromNow();        // xx 小时前
moment().startOf('hour').fromNow();       // xx 分钟前

// 到现在为止已距当天/小时结束还有
moment().endOf('day').fromNow()       // xx 小时后
moment().endOf('hour').fromNow()      // xx 分钟后

// toNow与fromNow给出相反的间隔
moment([2008,8,8]).toNow() // xx 年后

// to用户两个时间的对比
const start = moment([2022, 8, 11]);
const end = moment([2022, 8, 13]);
console.log(end.to(start))  // 2 天前
console.log(start.to(end))  // 2 天后

时间计算

subtract() 通过减去时间来改变原始的 momentadd() 通过增加时间来改变原始的 momentstartOf() / endOf() 通过将原始的 moment 设置为时间单位的开头/末尾来对其进行更改 注:以上计算本身还是moment如果项展示还需要借助formatcalendar

代码语言:javascript
代码运行次数:0
运行
复制
// 减去响应的天数
console.log(moment().subtract(10, 'days')) 
console.log(moment().subtract(10, 'days').format("YYYY-MM-DD"))
console.log(moment().subtract(10, 'days').calendar())

// 已2022年8月13日 13时测试结果如下
// Moment<2022-08-03T15:01:51+08:00>
// 2022-08-03
// 2022/08/03
     
// 同样测试时间天数加法
console.log(moment().add(7, 'days').calendar())    // 2022/08/20
console.log(moment().add(1, 'months').calendar())  // 2022/09/13
console.log(moment().add(10, 'years').calendar())  // 2032/08/13

// 举例当月的开始和结束天
console.log(moment().startOf('month').calendar())
console.log(moment().endOf('months').calendar())

对于moment.js 以上是大奇认为比较常用的一些方法,还有更多的用法方便在时间上的快捷操作,按照项目需要随用随事到官方查看使用文档即可。

本篇主要讲解了几个后边要用到扩展知识点,在当今的开发环境生态下,有很多类似这样好用的前后端开发工具包,我们要善于发现和利用它们,尽量避免无效重复造轮子,把时间花费在功能实现上。

上篇回顾

下篇预告:实现产品基础搜索和分页列表

🔗 项目源代码地址

https://github.com/mrzcode/TestProjectManagement

End

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-12-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 非典型性程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Moment.js
    • 安装和使用
    • 常用方法
      • 格式化时间
      • 时间计算
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档