模块开发之时间/日期组件moment.js使用(十四)

矫情吗；* 2022-05-11 05:33 655阅读 0赞

### 文章目录 ###

*  前言
 *  基本使用
 *   *  moment与字符串想到转换
     *  当前时间
 *  语法
 *   *  创建moment实例的方式
     *   *  时间字符串+指定格式
         *  时间字符串+多定格式
         *  moment完全支持iso-8601格式字符串
         *  以对象形势创建，这很重要
         *  传入date对象
 *  接收数组
 *   *  moment默认值
     *   *  不传任何参数即是当前时间
         *  怎样的默认值
 *  对moment时间的操作
 *   *  get/set方法
     *  时间的加减操作
     *   *  加法
         *  减法
     *  指定格式的开始时间和结束时间
     *  两个moment的比较
     *  moment比较大小
 *  ISO 8601时间以及时间里T和Z了解
 *  格式化
 *   *  moment帮我们设置了一些长日期格式

**模块开发之时间/日期组件moment.js使用(十四)**

# 前言 #

moment.js框架是我见过的处理日期和时间最好的工具，再也不用自己写个类处理日期格式了，放弃Date和calendar的处理吧

# 基本使用 #

## moment与字符串想到转换 ##

一个基本的使用方式也是常用的方式是怎么把日期字符串转成`moment`方式，同时将`moment`对象显示成我们想要的方式  
比如

const moment = require('moment')
    //字符串转换成moment
    let a = moment("2018-08-29 12:13:14", "YYYY-MM-DD hh:mm:ss")
    //moment转换成字符串
    console.log(a.format("YYYY-MM-DD hh:mm:ss"))

这是基本使用方式.  
let a = moment(“2018-08-29 12:13:14”, “YYYY-MM-DD hh:mm:ss”):moment()构造函数第一个参数是时间日期，第二个参数是传入的时间日期的格式，方便moment解析。  
a.format(“YYYY-MM-DD hh:mm:ss”):是将moment实例以我们想格式化的形势展示，`"YYYY-MM-DD hh:mm:ss"`这个即是展示形势。当然我们可以组合很多种。后面会讲到。

## 当前时间 ##

不传任何参数即表示当前时间。如下

let a = moment()
    console.log(a.format("YYYY-MM-DD hh:mm:ss"))

输出：2018-09-20 02:03:12

# 语法 #

## 创建moment实例的方式 ##

### 时间字符串+指定格式 ###

语法

moment(String, String);//时间，格式
    moment(String, String, String);//时间，格式
    moment(String, String, Boolean);//时间，格式，严格模式
    moment(String, String, String, Boolean);//时间，格式，国际化(比如“zh-cn”)严格模式

例子

const moment = require('moment')
    let a = moment("2018-09-05","YYYYMMDD")
    console.log(a.format("YYYYMMDD hh:mm:ss"))

输出：`20180905 12:00:00`

const moment = require('moment')
    let a = moment("2018-09-05","YYYY-MM-DD")
    console.log(a.format("YYYYMMDD hh:mm:ss"))

输出：`20180905 12:00:00`  
moment在解析时遇到字符串里的`非字母和数字`时，默认忽略不解析，所以`YYYYMMDD`和`"YYYY-MM-DD"`是一样效果

const moment = require('moment')
    let a = moment("05","DD")
    console.log(a.format("YYYYMMDD hh:mm:ss"))

输出：`20180905 12:00:00`

### 时间字符串+多定格式 ###

如果我们不知道传入的时间字符串是什么格式，但肯定知道是其中一种，我们所以用数组指定格式。

const moment = require('moment')
    let a = moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"],"zh-cn",true);
    console.log(a.format("YYYYMMDD hh:mm:ssa"))

输出：`19951225 12:00:00凌晨`

### moment完全支持iso-8601格式字符串 ###

比如

moment("2010-01-01T05:06:07", moment.ISO_8601);
     moment("2010-01-01T05:06:07", ["YYYY", moment.ISO_8601]);

### 以对象形势创建，这很重要 ###

例如

moment({ y    :2010, M     :3, d   :5, h    :15, m      :10, s      :3, ms          :123});
    moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123});
    moment({ years:2010, months:3, days:5, hours:15, minutes:10, seconds:3, milliseconds:123});

在moment里`y，year,years`是等价的，所以传任何一种都可以。同时`d,day,days`一样，其它亦是如此  
这里会涉及到默认值情况，比如我们只传hour或day会怎样。

### 传入date对象 ###

var day = new Date(2011, 9, 16);
    var dayWrapper = moment(day);
    console.log(dayWrapper.format("YYYYMMDD hh:mm:ssa"))//输出20111016 12:00:00am

这样我们就可以将Date转换成moment对象了

# 接收数组 #

这种方式不灵活，必需按年月日顺序组织数组，几乎不用，贴个例子

moment([2010, 6, 10]);

## moment默认值 ##

### 不传任何参数即是当前时间 ###

moment();

### 怎样的默认值 ###

以`2018-09-20 10:10:10:123`为例  
如果只传hour，那么时间的左边会是当前时间年月时，hour右边的则默认是0

let a = moment("10", "hh");
    console.log(a.format("YYYYMMDD hh:mm:ssa"))//输出20180920 10:00:00am

let a = moment("10", "DD");
    console.log(a.format("YYYYMMDD hh:mm:ssa"))//20180910 12:00:00am

day的左边是当前时间的年月，右边默认是0时间，注意上面的凌晨12点，也就是一天开始时间0点

# 对moment时间的操作 #

## get/set方法 ##

获取对象值`get方法`

const moment = require('moment')
    var day = new Date(2011, 9, 16);
    var dayWrapper = moment(day);
    console.log("y=" + dayWrapper.get('y'))
    console.log("year=" + dayWrapper.get('year'))
    console.log("years=" + dayWrapper.get('years'))

输出  
`y=2011 year=2011 years=2011`

对应的`set方法`为

const moment = require('moment')
    var day = new Date(2011, 9, 16);
    var dayWrapper = moment(day);
    dayWrapper.set('y',2012)
    //dayWrapper.get('year',2012)
    //dayWrapper.get('years',2012)
    console.log("resutl:" + dayWrapper.format("YYYY-MM-DD hh:mm:ss:ms"))

输出结果：`resutl:2012-10-16 12:00:00:00`

其它的简写如下

<table> 
 <thead> 
  <tr> 
   <th>字符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>y/year/years</td> 
   <td>年</td> 
  </tr> 
  <tr> 
   <td>M/month/months</td> 
   <td>月</td> 
  </tr> 
  <tr> 
   <td>d/day/days</td> 
   <td>日</td> 
  </tr> 
  <tr> 
   <td>h/hour/hours</td> 
   <td>时</td> 
  </tr> 
  <tr> 
   <td>m/minute/minutes</td> 
   <td>分</td> 
  </tr> 
  <tr> 
   <td>s/second/seconds</td> 
   <td>秒</td> 
  </tr> 
  <tr> 
   <td>ms/millisecond/milliseconds</td> 
   <td>毫秒</td> 
  </tr> 
  <tr> 
   <td>w/week/weeks</td> 
   <td>周</td> 
  </tr> 
  <tr> 
   <td>Q/quarter/quarters</td> 
   <td>季度</td> 
  </tr> 
 </tbody> 
</table>

## 时间的加减操作 ##

### 加法 ###

语法

moment().add(Number, String);
    moment().add(Duration);//持续时间
    moment().add(Object);

这个很简单，对应三个例子

moment().add(7, 'days').add(1, 'months');
    moment().add({days:7,months:1});
    moment([2012, 0, 31]).add(moment.duration({'days' : 1}));

当前如果将值变成`负数`则和减法功能一样的。

### 减法 ###

和加法是对应的，语法

moment().subtract(Number, String);
    moment().subtract(Duration);
    moment().subtract(Object);

例子

moment().subtract(7, 'days');
    moment().subtract({days:7,months:1});
    moment([2012, 0, 31]).subtract(moment.duration({'days' : 1}));

## 指定格式的开始时间和结束时间 ##

moment().startOf(String)：修改了moment实例的时间，指向开始  
moment().endOf(String)：修改了moment实例的时间，指向结束

var str = "YYYY-MM-DD hh:mm:ms"
    var a = moment("2019-2-20 13:13:13",str)
    console.log("本月开始日期" + a.startOf("M").format(str))

输出：

本月开始日期2019-02-01 12:00:00
    本月结束日期2019-02-28 11:59:59

## 两个moment的比较 ##

`不仅仅限于moment的比较，其它格式同样适合`

## moment比较大小 ##

# ISO 8601时间以及时间里T和Z了解 #

具体对UTC的了解可百度一下[ISO 8601 ][ISO 8601]，北京时间比较ISO 8601时间要快，也就是说`ISO 8601时间+8houre=北京时间`  
`T`是日期和时间之间的特殊字符，功能和空格一样，起分隔作用。比如  
`2018-09-28T01:52:35`和`2018-09-28 01:52:35`是等价功能。

`Z`表示时间是ISO 8601格式时间  
比如：

var a2 = moment("2018-09-28T14:52:35Z")
    console.log("a2:" + a2.format())

输出`a2:2018-09-28T22:52:35+08:00`  
他`ISO 8601时间+8houre=北京时间`公式一样，当前时间其实是`2018-09-28 22:52:35`，字符串后面```+08:00``是ISO 8601时间偏移量即8小时。```  
对比如下  
ISO 8601格式如下：`2018-09-28T14:52:35Z`  
中国标准时间（UTC时间）：`a2:2018-09-28T22:52:35+08:00`

# 格式化 #

重量及选手，为什么`"YYYY-MM-DD HH:mm:ss"`就能展示`2018-09-28 14:52:35`呢

<table> 
 <thead> 
  <tr> 
   <th>缩写</th> 
   <th>输出结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Month</td> 
   <td>M</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>Mo</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>MM</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>MMM</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>MMMM</td> 
  </tr> 
  <tr> 
   <td>Quarter</td> 
   <td>Q</td> 
  </tr> 
  <tr> 
   <td>Day of Month</td> 
   <td>D</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>Do</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>DD</td> 
  </tr> 
  <tr> 
   <td>Day of Year</td> 
   <td>DDD</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>DDDo</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>DDDD</td> 
  </tr> 
  <tr> 
   <td>Day of Week</td> 
   <td>d</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>do</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>dd</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>ddd</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>dddd</td> 
  </tr> 
  <tr> 
   <td>Day of Week (Locale)</td> 
   <td>e</td> 
  </tr> 
  <tr> 
   <td>Day of Week (ISO)</td> 
   <td>E 1 2 … 6 7</td> 
  </tr> 
  <tr> 
   <td>Week of Year</td> 
   <td>w</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>wo</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>ww</td> 
  </tr> 
  <tr> 
   <td>Week of Year (ISO)</td> 
   <td>W</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>Wo</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>WW</td> 
  </tr> 
  <tr> 
   <td>Year</td> 
   <td>YY</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>YYYY</td> 
  </tr> 
  <tr> 
   <td>Week Year</td> 
   <td>gg 70 71 … 29 30</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>gggg</td> 
  </tr> 
  <tr> 
   <td>Week Year (ISO)</td> 
   <td>GG</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>GGGG</td> 
  </tr> 
  <tr> 
   <td>AM/PM</td> 
   <td>A</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>a</td> 
  </tr> 
  <tr> 
   <td>Hour</td> 
   <td>H</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>HH</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>h</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>hh</td> 
  </tr> 
  <tr> 
   <td>Minute</td> 
   <td>m</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>mm</td> 
  </tr> 
  <tr> 
   <td>Second</td> 
   <td>s</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>ss</td> 
  </tr> 
  <tr> 
   <td>Fractional Second</td> 
   <td>S</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>SS</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>SSS</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>SSSS … SSSSSSSSS</td> 
  </tr> 
  <tr> 
   <td>Z</td> 
   <td>-07:00 -06:00 … +06:00 +07:00</td> 
  </tr> 
  <tr> 
   <td>Unix Timestamp</td> 
   <td>X</td> 
  </tr> 
  <tr> 
   <td>Unix Millisecond Timestamp</td> 
   <td>x 1360013296123</td> 
  </tr> 
 </tbody> 
</table>

## moment帮我们设置了一些长日期格式 ##

效果如下

moment().format('L');    // 2018-09-20
    moment().format('l');    // 2018-09-20
    moment().format('LL');   // 2018年9月20日
    moment().format('ll');   // 2018年9月20日
    moment().format('LLL');  // 2018年9月20日下午4点26分
    moment().format('lll');  // 2018年9月20日下午4点26分
    moment().format('LLLL'); // 2018年9月20日星期四下午4点26分
    moment().format('llll'); // 2018年9月20日星期四下午4点26分

\#全部设置语言  
使用`moment.locale(语言)`设置，`moment().lang(String)`在2.8.1被废弃了

moment.locale('en');
    moment.locale('zh-cn');

参考官方能获得更高知识  
[中文官网首页][Link 2]  
[中文官网文档][Link 3]

[Link 1]: http://momentjs.cn/docs/#/query/
[ISO 8601]: https://baike.so.com/doc/5457833-5696221.html
[Link 2]: http://momentjs.cn/
[Link 3]: http://momentjs.cn/docs/#/displaying/days-in-month/