Monent.js:强大的日期处理类库
一、介绍及安装

1.1 介绍
Moment.js是一个优秀的JavaScript 日期处理类库.
如果没有Moment.js之类的日期处理库,我们如果需要获得格式化后的日期.往往需要通过new Date().getMonth()
...之类方法进行拼接, 或者使用JQ封装的函数. 但现在但SPA页面不怎么使用JQ.所以掌握靠谱的Moment.js
还是很有必要的
举个小小例子:
请听题: 通过原生js和moment.js分别获取
moment().format('YYYY-MM-DD HH:mm:ss')
格式的时间
const js_date = new Date();
const moment_date = moment();
console.log('js new Date() ==========>', `${js_date.getFullYear()}-${js_date.getMonth() + 1}-${js_date.getDate()} ${js_date.getHours()}:${js_date.getMinutes()}:${js_date.getSeconds()}`)
console.log('moment moment() ==========>', moment_date.format('YYYY-MM-DD HH:mm:ss'))
输出结果:
js new Date() ==========> 2018-11-1 18:0:59
moment moment() ==========> 2018-11-01 18:00:59
momentjs
优势之处显而易见

1.2 安装
环境 | 安装方式 | 引入例子 | 描述 |
---|---|---|---|
Node.js | npm install moment -D | 1⃣️ | 通常用在react 、vue 等单页面项目 |
浏览器 | 可官网单独下载js,也可以通过npm install moment ,然后引入里面的js |
2⃣️️ | 一般直接在html文件里使用 |
1⃣️ Node.js(React、Vue):
//导入
import moment from 'moment' //ES6
const moment = require('moment') //AMD规范
//使用
let nowTime = moment() //当前时间
...
2⃣️ 浏览器(.html): 本文的案例均采用这种方式
//导入
<script src="xxx/moment.js" ></script> //js文件既可以自己去官网首页下载,也可以通过npm install moment获得
const moment = moment(); //当前时间
二、API大全

2.1 解析时间格式
解析时间格式意思就是当传入某个时间字符串的时候, `moment.js`可以解析出`YYYY-MM-DD`之类的格式
语法:
moment(时间内容-String)
例子:
var analysisMoment = moment("1995-12-25");
console.log(analysisMoment)
输出的部分结果:
_d: Mon Dec 25 1995 00:00:00 GMT+0800 (CST) {}
_f: "YYYY-MM-DD"
_i: "1995-12-25"
_isAMomentObject: true
_isUTC: false
_isValid: true
甚至还可以解析出[1995, 12, 25]

2.2 转换时间格式
这个功能是我们经常会用到的.也是文章最开始举例使用的方法.
语法:
moment(内容-String).format(格式-String)
const dateString = '2018-11-01'
const transformFormat = moment(dateString).format('YYYY MM DD')
console.log('transformFormat =========>', transformFormat)
只要Y、M、D、H、m、s...写对了,无论转换成什么格式都可以!
momemt('20181101').format('YY年MM月DD日')
//输出 18年11月01日

2.3 创建/调整日期
创建日期例子:
moment({ y: 2018, Month: 11, day: 01, hour:15, minute:10 });
修改日期:
语法:
moment().seconds() === new Date().getSeconds();
同理还有:
毫秒:millsecond(Number)
分钟:minute(Number)
星期:day(Number|String
年: year(Number)
...
例子:
console.log('修改月份为二月 =========>', moment().month('Feb').format('YYYY MM DD') )
console.log('修改当前时间的小时为九点:下班 =========>', moment().seconds(30).format('YYYY MM DD HH:mm'))
输出结果:
修改当前时间的月份为二月 =========> 2018 02 01
修改当前时间的小时为九点:下班 =========> 2018 11 01 20:05

2.3 日期操作方法
增加/减少日期
语法:
moment().add(Number, String);
moment().add(Duration);
moment().add(Object);
例子: 在当前时间增加/减少7天
//方式一 (Number, String)
console.log('当前时间增加7天:', moment().add(7, 'd').format('YYYY MM DD'))
console.log('当前时间减少两个月', moment().subtract(2, 'months').format('YYYY-MM-DD'))
//方式二、三 (二可结合moment.duration())
console.log('当前时间增加2天', moment().add({'day': 2}).format('YYYY-MM-DD'))
/***输出***/
//方式一
当前时间增加7天: 2018-11-08
当前时间减少两个月 2018-09-01
//方式二
当前时间增加2天 2018-11-03

2.4 日期相关显示
时间差显示
和当前时间比较
语法:
//以当前时间为基准进行对比
moment().fromNow(Boolean); //之前
moment().toNow(); //之后
//布尔值可省略,如加上则只显示时间差
例子:
console.log('2008年和今天:', moment([2008, 11, 1]).fromNow())
console.log('2008年和今天相差:', moment([2008, 11, 1]).fromNow(true))
//输出
2008年和今天: 10 years ago
2008年和今天相差: 10 years
和之前/之后时间比较
语法:
moment().from(Moment|String|Number|Date|Array, Boolean); //之前
moment().to(Moment|String|Number|Date|Array, Boolean); //之后
例子:
//from
var a = moment([2007, 0, 28]);
var b = moment([2007, 0, 29]);
a.from(b); // "a day ago"
a.from([2007, 0, 29]); // "a day ago"
a.from(new Date(2007, 0, 29)); // "a day ago"
a.from("2007-01-29"); // "a day ago"

其他
简写(key <=> Shorthand)对比表可以参考:
《Momentjs docs》
Monent.js:强大的日期处理类库的更多相关文章
- js强大的日期格式化函数,不仅可以格式化日期,还可以查询星期,一年中第几天等
js强大的日期格式化,timestamp支持10位或13位的时间戳,或是时间字符串,同时支持android ios的处理,不只是日期的格式化还有其它方法,比如获 获取某月有多少天 .获取某个日期在这一 ...
- Moment.js 超棒Javascript日期处理类库
Moment.js 不容错过的超棒Javascript日期处理类库 主要特性: 3.2kb超轻量级 独立类库,意味这你不需要倒入一堆js 日期处理支持UNIX 时间戳,String,指定格式的Date ...
- moment.js(日期处理类库)的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用moment.js轻松管理日期和时间
大家在前端Javascript开发中会遇到处理日期时间的问题,经常会拿来一大堆处理函数才能完成一个简单的日期时间显示效果.今天我给大家介绍一个轻量级的Javascript日期处理类库:moment.j ...
- [Javascript] 5个最佳的Javascript日期处理类库
在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法. 在大家日常网站开发和web应 ...
- js快捷输入日期
点击这里查看效果http://keleyi.com/keleyi/phtml/jstexiao/10.htm 以下式代码: <!DOCTYPE html> <html> < ...
- Sql Server 中一个非常强大的日期格式化函数
Sql Server 中一个非常强大的日期格式化函数Select CONVERT(varchar(100), GETDATE(), 0)-- 05 16 2006 10:57AMSelect CONV ...
- Date类型-演示JS中的日期
<script type="text/javascript"> /* *演示JS中的日期 */ var date = new Date(); document.writ ...
- [js开源组件开发]js多选日期控件
js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...
随机推荐
- Codeforces 1136C - Nastya Is Transposing Matrices
题目链接:https://codeforces.com/problemset/problem/1136/C 题意: 给出 $n \times m$ 的矩阵 $A,B$,你可以对其中任意某个 $k \t ...
- [01-01]oracle数据库汉化
oracle汉化方法: 1.下载oracle工具,下载与自己电脑版本相关的oracle工具,可在电脑 [控制面板] - [系统和安全] - [系统] 查看电脑版本 32位或64位,oracle工具下载 ...
- sourceTree回退撤销commit
https://blog.csdn.net/gang544043963/article/details/71511958
- 洛谷P2569 股票交易 [SCOI2010] dp
正解:dp+单调队列优化 解题报告: 先放个传送门鸭qwq umm首先dp转移挺好想的?就买和不买 f[i][j]表示第i天手上有j的股份的最多钱,转移也很好想?就枚举第1天到第i-w-1天枚举买k股 ...
- SPSS提示“列表中不允许存在字符串变量”的解决方法
点击 查看 菜单->变量->将需要修改为数字类型的列属性改为数字,还可以更改小数位数
- python 当前时间多加一天、一小时、一分钟
datetime模块 import datetime # 获取当前时间 print(datetime.datetime.now()) # 2017-07-15 15:01:24.619000 # 格式 ...
- 【UML】NO.53.EBook.6.UML.2.001-【Thinking In UML 大象 第二版】- 概述
1.0.0 Summary Tittle:[UML]NO.53.EBook.6.UML.2.001-[Thinking In UML 大象 第二版]- 概述 Style:DesignPattern S ...
- python调用RPC接口
要调用RPC接口,python提供了一个框架grpc,这是google开源的 rpc相关文档: https://grpc.io/docs/tutorials/basic/python.html 需要安 ...
- Delphi中类的运行期TypeInfo信息结构说明(转载)
Delphi中类的运行期TypeInfo信息结构说明作者:刘啸CnPack开发组 http://www.cnpack.org关键字:RTTI, TypeInfo, TypeData, PropInfo ...
- 【winform】DataGridView控件[表格]
一.表格 0.从数据库获取一个表在DataGridView中显示: 数据库查询的方式大同小异,重点是如何把数据显示到控件中的方法,通过dataset作为数据的中继,把Adapter中的数据存到data ...