菜单 搜索
首页 前端知识 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

如何定义 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

广告位招租：QQ85750956
大家推荐的文章
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的真是我自己写的！！

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

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