在日常工作中,只要用到datepicker组件的地方都少不了moment.js的身影,现总结几个经常用到的方法,方便记忆。

安装

npm install moment --save
yarn add moment

我常用的就是上面两种,还有其他安装方式,可参考官网

在vue项目中引入

import moment from 'moment';

moment()返回moment对象

moment() // 不传参数,默认返回当前时间的moment对象
moment('2024-01-29') // 返回指定日期的moment对象
moment('01/29/2024','MM-DD-YYYY') // 返回指定日期特定格式的moment对象

format()日期格式化 返回指定格式的日期字符串

moment().format('YYYY-MM-DD') // 不传参数,默认返回所设置格式的当前时间的字符串
moment('2024/01/29').format('YYYY-MM-DD') // 返回所设置格式的时间的字符串

加法

moment().add(Number, String)向后加时间,要添加时间,请传递要添加的时间和要添加的数量的键。Number加几,String添加的单位,可选值见下表,括号内为简写,注意大小写。

Value
年数years (y)
季度quarter (Q)
月数months (M)
周数weeks (w)
天数days (d)
小时数hours (h)
分钟数minutes (m)
秒数seconds (s)
毫秒数milliseconds (ms)
moment().add(1, 'days') // 添加一天
moment().add(1, 'months'); // 添加一个月会将指定的月数添加到日期
moment().add(1.5, 'months') == moment().add(2, 'months') // 四舍五入到最接近的整数
moment().add(.7, 'years') == moment().add(8, 'months') //.7*12 = 8.4, rounded to 8

注意:月份和年份的特殊考虑,如果原始日期的月份日期大于最后一个月的天数,则该月的日期将更改为最后一个月的最后一天。从 2.12.0 开始,当传递天和月的小数值时,它们将四舍五入到最接近的整数。周、季度和年转换为天或月,然后四舍五入为最接近的整数。

减法

moment().subtract(Number, String);向前减去时间,参数同add

moment().subtract(7, 'days'); // 向前推7天

取值和赋值

毫秒

获取或设置毫秒数,接受从 0 到 999 的数字。如果超出范围,它将冒泡到秒。

moment().millisecond(Number);
moment().millisecond(); // Number
moment().milliseconds(Number);
moment().milliseconds(); // Number

获取或设置秒数,接受从 0 到 59 的数字。如果超出范围,它将冒泡到分钟。

moment().second(Number);
moment().second(); // Number
moment().seconds(Number);
moment().seconds(); // Number

分钟

获取或设置分钟,接受从 0 到 59 的数字。如果超出范围,它将冒泡到分钟。

moment().minute(Number);
moment().minute(); // Number
moment().minutes(Number);
moment().minutes(); // Number

小时

获取或设置小时,接受从 0 到 23 的数字。如果超出范围,它将冒泡到天。

moment().hour(Number);
moment().hour(); // Number
moment().hours(Number);
moment().hours(); // Number

获取或设置月中的第几天,接受从 1 到 31 的数字。如果超出范围,它将冒泡到月。

moment().date(Number);
moment().date(); // Number
moment().dates(Number);
moment().dates(); // Number

注意:如果你链接多个动作来构造一个日期,你应该从一年开始,然后是一个月,然后是一天等。否则你可能会得到意想不到的结果,比如 day=31 和当前月份只有 30 天,返回的日期将是当月的 30 号。
不好的:moment().date(day).month(month).year(year)
好的:moment().year(year).month(month).date(day)

星期

获取或设置星期几,该方法可用于设置星期几,星期日为 0,星期六为 6。

moment().day(Number|String);
moment().day(); // Number
moment().days(Number|String);
moment().days(); // Number

如果给定的值是从 0 到 6,则结果日期将在当前(星期日到星期六)周内。如果超出范围,它将冒泡到其他周。

moment().day(-7); // last Sunday (0 - 7)
moment().day(0); // this Sunday (0)
moment().day(7); // next Sunday (0 + 7)
moment().day(10); // next Wednesday (3 + 7)
moment().day(24); // 3 Wednesdays from now (3 + 7 + 7 + 7)

注意:Moment#date表示月份的日期,Moment#day表示星期几。

星期(区域设置感知)

根据区域设置获取或设置星期几,如果语言环境将星期一指定为一周的第一天,则 moment().weekday(0)将为星期一。如果星期日是一周的第一天,则 moment().weekday(0)将是星期日

moment().weekday(Number);
moment().weekday(); // Number

moment#day一样,如果超出范围,就会冒泡到其他周。

// when Monday is the first day of the week
moment().weekday(-7); // last Monday
moment().weekday(7); // next Monday
// when Sunday is the first day of the week
moment().weekday(-7); // last Sunday
moment().weekday(7); // next Sunday

月份

获取或设置月份,接受从 0 到 11 的数字。如果超出范围,它将冒泡到年份。

moment().month(Number|String);
moment().month(); // Number
moment().months(Number|String);
moment().months(); // Number

注意:月份是零索引的,所以一月是第 0 个月。
在 2.1.0 版本之前,如果某个 moment 更改了月份,并且新月份没有足够的天数来保留当月的当前日期,则会溢出到下个月。从版本 2.1.0 开始,该值已更改为固定到目标月末。

// before 2.1.0
moment([2012, 0, 31]).month(1).format("YYYY-MM-DD"); // 2012-03-02
// after 2.1.0 根据该值会固定到目标月末,可以利用这一特性获取月末的日期
moment([2012, 0, 31]).month(1).format("YYYY-MM-DD"); // 2012-02-29 

2.16.0 已弃用,使用 moment().months()。请改用 moment().month()

年份

获取或设置年份,接受从 -270,000 到 270,000 的数字。

moment().year(Number);
moment().year(); // Number
moment().years(Number);
moment().years(); // Number

注意:2.6.0 已弃用使用 moment().years()。请改用 moment().year()

取值

2.2.1+版本支持,获取或设置年份,字符串获取器。一般来说单位不区分大小写,并支持复数和缩写形式:年(years,y),月(months,M),日期(dates,D),小时(hours,h),分钟(minutes,m),秒(seconds,s),毫秒(milliseconds,ms)

moment().get('year');
moment().get('month');  // 0 to 11
moment().get('date');
moment().get('hour');
moment().get('minute');
moment().get('second');
moment().get('millisecond');

赋值

moment().set(String, Int);
moment().set(Object(String, Int));

通用设置器,接受单位作为第一个参数,值作为第二个参数:

moment().set('year', 2013);
moment().set('month', 3);  // April
moment().set('date', 1);
moment().set('hour', 13);
moment().set('minute', 20);
moment().set('second', 30);
moment().set('millisecond', 123);
// 2.9.0 中添加了对象解析
moment().set({'year': 2013, 'month': 3});

显示

月份的天数

moment().daysInMonth();

获取当月的天数。

oment("2012-02", "YYYY-MM").daysInMonth() // 29
moment("2012-01", "YYYY-MM").daysInMonth() // 31

从此刻到过去的时间

moment().fromNow();
moment().fromNow(Boolean);

一种常用的显示时间的方式由 moment#fromNow处理。这有时称为时间距离或相对时间。

moment([2007, 0, 29]).fromNow(); // 4 years ago

如果传 true,可以得到不带后缀的值。

moment([2007, 0, 29]).fromNow();     // 4 years ago
moment([2007, 0, 29]).fromNow(true); // 4 years

从此刻到未来的时间

moment().toNow();
moment().toNow(Boolean);

一种常用的显示时间的方式由 moment#fromNow处理。这有时称为时间距离或相对时间。这类似于 moment.fromNow,但给出了相反的区间:a.fromNow() = - a.toNow()

moment([2007, 0, 29]).toNow(); // in 4 years

如果传 true,可以得到不带后缀的值。

moment([2007, 0, 29]).toNow();     // in 4 years
moment([2007, 0, 29]).toNow(true); // 4 years

时间差

moment().diff(Moment|String|Number|Date|Array);
moment().diff(Moment|String|Number|Date|Array, String);
moment().diff(Moment|String|Number|Date|Array, String, Boolean);

要获得以毫秒为单位的差异,请像使用 moment#from一样使用 moment#diff

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000

要获得另一个测量单位的差异,请将该测量值作为第二个参数传递。

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b, 'days') // 1

支持的测量是 years、months、weeks、days、hours、minutes 和 seconds。为了便于开发,从 2.0.0 开始支持单数形式。版本 1.1.1 中提供了除毫秒以外的测量单位。
默认情况下,moment#diff会将结果截断为零位小数,返回一个整数。如果你想要一个浮点数,传递 true 作为第三个参数。在 2.0.0 之前,moment#diff返回四舍五入到最接近的整数的数字,而不是截断的数字。

var a = moment([2008, 9]);
var b = moment([2007, 0]);
a.diff(b, 'years');       // 1
a.diff(b, 'years', true); // 1.75
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐