菜单 搜索
首页 前端知识 moment.js使用

moment.js使用

2024-03-02 09:03:43 前端知识 前端哥 871 780 我要收藏

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。

一、引入moment.js

1.Node.js方式引入

（1）安装

● npm install moment

●  yarn add moment

（2）引入

● require 方式  
var moment = require('moment');

● import 
方式 import moment from'moment';

2.  浏览器方式引入

二、  设定moment区域为中国

// require 方式

require ('moment/locale/zh-cn')  moment.locale('zh-cn');

// import 方式

import 'moment/locale/zh-cn'moment.locale('zh-cn');

三、使用

1.获取时间

（1）获取当前时间
moment()
（2）获取今天0时0分0秒
moment().startOf('day')
（3）获取本周第一天(周日)0时0分0秒
moment().startOf('week')
（4）获取本周周一0时0分0秒
moment().startOf('isoWeek')
（5）获取当前月第一天0时0分0秒
moment().startOf('month')
（6）获取今天23时59分59秒
moment().endOf('day')
（7）获取本周最后一天(周六)23时59分59秒
moment().endOf('week')
（8）获取本周周日23时59分59秒
moment().endOf('isoWeek')
（9）获取当前月最后一天23时59分59秒
moment().endOf('month')
（10）获取当前月的总天数
moment().daysInMonth()
（11）获取时间戳(以秒为单位)
moment().format('X')        // 返回值为字符串类型

moment().unix()              // 返回值为数值型
（12）获取时间戳(以毫秒为单位)
moment().format('x')         // 返回值为字符串类型

moment().valueOf()          // 返回值为数值型
（13）获取年份
moment().year()moment().get('year')
（14）获取月份
moment().month()                // (0\~11, 0: January, 11: December)

moment().get('month')
（15）获取一个月中的某一天
moment().date()moment().get('date')
（16）获取一个星期中的某一天
moment().day()                   // (06, 0: Sunday, 6: Saturday)

moment().weekday()          // (06, 0: Sunday, 6: Saturday)

moment().isoWeekday()      // (1\~7, 1: Monday, 7: Sunday)

moment().get('day')

moment().get('weekday')

moment().get('isoWeekday')
（17）获取小时
moment().hours()

moment().get('hours')
（18）获取分钟
moment().minutes()

moment().get('minutes')
（19）获取秒数
moment().seconds()
moment().get('seconds')
（20）获取当前的年月日时分秒
moment().toArray()        // [years, months, date, hours, minutes, seconds, milliseconds]
moment().toObject()      // {years: xxxx, months: x, date: xx ...}

2.  设置时间

（1）设置年份
moment().year(2019)

moment().set('year',2019)

moment().set({year:2019})
（2）设置月份
moment().month(11)         // (0\~11, 0: January, 11: December)

moment().set('month',11)
（3）设置某个月中的某一天
moment().date(15)

moment().set('date',15)
（4）设置某个星期中的某一天
moment().weekday(0)                   // 设置日期为本周第一天（周日）

moment().isoWeekday(1)            // 设置日期为本周周一

moment().set('weekday',0)

moment().set('isoWeekday',1)
（5）设置小时
moment().hours(12)

moment().set('hours',12)
（6）设置分钟
moment().minutes(30)

moment().set('minutes',30)
（7）设置秒数
moment().seconds(30)

moment().set('seconds',30)
（8）年份+1
moment().add(1,'years')

moment().add({years:1})
（9）月份+1
moment().add(1,'months')
（10）日期+1
moment().add(1,'days')
（11）星期+1
moment().add(1,'weeks')
（12）小时+1
moment().add(1,'hours')
（13）分钟+1
moment().add(1,'minutes')
（14）秒数+1
moment().add(1,'seconds')
（15）年份-1
moment().subtract(1, 'years')

moment().subtract({years: 1})
（16）月份-1
moment().subtract(1,'months')
（17）日期-1
moment().subtract(1,'days')
（18）星期-1
moment().subtract(1,'weeks')
（19）小时-1
moment().subtract(1,'hours')
（20）分钟-1
moment().subtract(1,'minutes')
（21）秒数-1
moment().subtract(1,'seconds')

3.格式化时间

格式代码说明返回值例子
M数字表示的月份，没有前导零1到12
MM数字表示的月份，有前导零01到12
MMM三个字母缩写表示的月份Jan到Dec
MMMM月份，完整的文本格式January到December
Q季度1到4
D月份中的第几天，没有前导零1到31
DD月份中的第几天，有前导零01到31
d星期中的第几天，数字表示0到6，0表示周日，6表示周六
ddd三个字母表示星期中的第几天Sun到Sat
dddd星期几，完整的星期文本从Sunday到Saturday
w年份中的第几周如42：表示第42周
YYYY四位数字完整表示的年份如：2014 或 2000
YY两位数字表示的年份如：14 或 98
A大写的AM PMAM PM
a小写的am pmam pm
HH小时，24小时制，有前导零00到23
H小时，24小时制，无前导零0到23
hh小时，12小时制，有前导零00到12
h小时，12小时制，无前导零0到12
m没有前导零的分钟数0到59
mm有前导零的分钟数00到59
s没有前导零的秒数1到59
ss有前导零的描述01到59
XUnix时间戳1411572969
（1）格式化年月日： ‘xxxx年xx月xx日’
moment().format('YYYY年MM月DD日')
（2）格式化年月日： ‘xxxx-xx-xx’
moment().format('YYYY-MM-DD')
（3）格式化时分秒(24小时制)： ‘xx时xx分xx秒’
moment().format('HH时mm分ss秒')
（4）格式化时分秒(12小时制)：‘xx:xx:xx am/pm’
moment().format('hh:mm:ss a')
（5）格式化时间戳(以毫秒为单位)
moment().format('x')    // 返回值为字符串类型

4.比较时间

（1）获取两个日期之间的时间差
let start\_date =moment().subtract(1,'weeks')

let end\_date = moment()

end\_date.diff(start\_date)        // 返回毫秒数

end\_date.diff(start\_date,'months')    // 月

end\_date.diff(start\_date,'weeks')   // 周

end\_date.diff(start\_date,'days')  // 天

start\_date.diff(end\_date,'days')    // -7
(2）判断B日期是否在A日期前面
moment(B).isBefore(A)

5.  转化为JavaScript原生Date对象

moment().toDate()

newDate(moment())

6.日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a');         // 五月 24日 2019, 7:47:43 晚上
moment().format('dddd');                     // 星期五

moment().format("MMM Do YY");          // 5月 24日 19

moment().format('YYYY \[escaped] YYYY');        // 2019 escaped 2019

moment().format();                     // 2019-05-24T19:47:43+08:00

7.相对时间

moment("20111031","YYYYMMDD").fromNow();             // n年前

moment("20111031","YYYYMMDD").fromNow(true);             // n年

moment().startOf('day').fromNow();               // n 小时前

moment().endOf('day').fromNow();                // n 小时内

moment().startOf('hour').fromNow();             // n 小时前

下表概述了每个时间长度显示的字符串的细分。

范围键样本输出
0 至 44 秒s几秒前
未设定ss44 秒前
45 至 89 秒m1 分钟前
90 秒至 44 分钟mm2 分钟前 … 44 分钟前
45 至 89 分钟h1 小时前
90 分钟至 21 小时hh2 小时前 … 21 小时前
22 至 35 小时d1 天前
36 小时至 25 天dd2 天前 … 25 天前
26 至 45 天M1 个月前
45 至 319 天MM2 个月前 … 10 个月前
320 至 547 天 (1.5 年)y1 年前
548 天+yy2 年前 … 20 年前

8.日历时间

moment().subtract(n,'days').calendar();           //当前时间的前n天时间

moment().calendar();                                     // 当前时间

moment().add(n,'days').calendar();              // 当前时间的后n天时间

9.多语言支持

moment().format('L');  moment().format('l');        // 月份数字，日期，年份 （09/04/1986）

moment().format('LL');   moment().format('ll');       //月份、月日、年 （1986 年 9 月 4 日）

moment().format('LLL');  moment().format('lll');       //  月份、月日、年、时间（1986 年 9 月 4 日 8：下午 30 点

moment().format('LLLL');  moment().format('llll');      // 月份名称、月份日期、星期几、年份、时间（1986 年 9 月 4 日星期四 8:下午 30 点）

10.其它实用技巧：

moment().format("YYYY-MM-DD")                       // 格式化显示当前时间

moment().subtract("month", +1).format("YYYY-MM")-01       // 上一个月的1号

moment().add("month", -1).format("YYYY-MM")-01     // 还是上一个月1号

let M =`${moment().format("YYYY-MM")}-01`        // 本月一号

moment(M).add("days", -1).format("YYYY-MM-DD")     // 上一个月月底

moment().startOf("year").format("YYYY-MM-DD")     // 本年的的开始日期

moment().endOf("year").format("YYYY-MM-DD")           // 本年的的结束日期

moment().valueOf()             // moment 转成时间戳

moment(string).format()       // 时间戳 转 moment

// 解决Moment格式化时间出现时区差的问题

moment().utcOffset()      // 接收数字，时间偏移量，单位：分钟

Moment(date).utcOffset(480).format('YYYY-MM-DD HH:mm:ss');         // 北京时间东八区时间，比零时区早8个小时（480分钟），所以应该加上480分钟
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3050.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

如何定义 jQuery 函数？

2024-03-20 11:03:16

jQuery事件方法

2024-03-20 11:03:06

JavaWeb笔记之前端开发JQuery

2024-03-20 11:03:55

原型链，改变this指向，settimeout和setinterval的区别， js入口函数与jQuery入口函数的区别，内存生命周期及解决内存浪费

2024-03-20 11:03:55

有小伙伴想要的纯原生版代码

2024-03-20 11:03:53

JQuery前端操作JSON浅谈

2024-03-12 01:03:20

「jQuery系列」jQuery插件介绍（表单校验Prettydate、提示框Tooltip、树型菜单Treeview）

2024-03-20 11:03:52

Echarts环形饼状图设置内外边框

2024-03-20 11:03:51

使用 Echarts 做数据可视化智能大屏1

2024-03-20 11:03:46

echarts 雷达图实例属性详解

2024-03-20 11:03:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！