JS时间处理插件MomentJS
来源:互联网 发布:论文抄袭软件 编辑:程序博客网 时间:2024/05/22 12:49
笔者在做项目的时候,需要对日期和时间进行一些处理和操作,但是每次都用JS自带的Date对象很不方便,还要写一堆繁琐的代码,后续维护起来也很痛苦。在网上找了一下JS处理日期和时间的插件,发现了MomentJS很好用,学习了一下它的语法,发现十分的简洁易懂,而且可扩展性很强,调用方法灵活。很多的方法调用形式多样,支持多种传参数方式。下面简单的整理了一下使用方式
构造Moment对象
MomentJS将时间封装成一个对象,moment对象,这个对象很多种构造方式,可以支持传入字符串、数组和对象的形式来构造。
当前系统时间
如果什么都不传,就获取当前的系统时间。
var now = moment()
字符串构造
可以传入字符串,首先会检查字符串的格式是否符合ISO 8601
的格式,如果不符合,就调用new Date(string)
来构造。
已知格式字符串
moment('2017-01-02'); //年月日moment('2017-01-02 13'); //年月日 小时moment('2017-01-02 13:12'); //年月日 小时分钟moment('2017-01-02 13:12:52'); //年月日 小时分钟秒moment('2017-01-02 13:12:52.123'); //年月日 小时分钟秒 毫秒
字符串+格式
假如日期的格式不符合ISO 8601
的格式,但是你知道输入的字符串的格式,也可以通过这种方式解析,解析的语法有以下四种格式:
moment(String, String);moment(String, String, String);moment(String, String, Boolean);moment(String, String, String, Boolean);
第一种已知某个时间的格式,将格式作为第二个参数传入
moment('12-25-1995 12/43/53', 'MM-DD-YYYY HH/mm/ss')
格式字母代表的含义如下表
第二种,可以将当地区域的关键符作为第三个参数传入。
moment('2012 juillet', 'YYYY MMM', 'fr');moment('2012 July', 'YYYY MMM', 'en');
MomentJS的匹配模式是十分宽松的,并且可能会导致一些我们不想要的行为。从2.3.0
版本开始,我们可以在最后传入一个布尔值来让Moment使用严格模式匹配。严格模式要求输入的字符串和格式要完全相同。
moment('It is 2012-05-25', 'YYYY-MM-DD').isValid(); // truemoment('It is 2012-05-25', 'YYYY-MM-DD', true).isValid(); // falsemoment('2012-05-25', 'YYYY-MM-DD', true).isValid(); // true
字符串+多格式
假如你不知道输入的字符串确切是用的哪种格式,但是知道是某些格式中的一种,可以将多种格式用数组的形式传入,将会以最先匹配到的格式为输出结果。
moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD"]);
对象
我们也可以通过传入一个对象的形式来创建moment对象,传入的对象中包括一些时间单位的属性。
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({ years:2010, months:3, date:5, hours:15, minutes:10, seconds:3, milliseconds:123});
上面代码中的day和date都表示当前月的第几天。
Date 对象
我们也可以传入JS原生的Date对象来创建moment对象。
var day = new Date(2011, 9, 16);var dayWrapper = moment(day);
数组
我们可以传入一个数字的数组来创建moment对象,数组中每个每个数字代表的含义如下:
// [年, 月, 日, 时, 分, 秒, 毫秒]moment([2010, 1, 14, 15, 25, 50, 125]);//2010年2月14日15时25分50秒125毫秒
需要注意的是:数组中的月、时、分、秒、毫秒都是从0开始的,而年和日都是从1开始的。
取值and赋值
MomentJS使用可以重载的get和set方法,跟我们以前在jQuery中的形式很相似。我们可以调用这些方法不传参数作来获取,传入参数作来设置。
自带函数
获取或者设置毫秒,设置的范围0到999
moment().millisecond(Number);moment().millisecond(); // Numbermoment().milliseconds(Number);moment().milliseconds(); // Number
获取或者设置秒,设置的范围0到59
moment().second(Number);moment().second(); // Numbermoment().seconds(Number);moment().seconds(); // Number
获取或者设置分钟,设置的范围0到59
moment().minute(Number);moment().minute(); // Numbermoment().minutes(Number);moment().minutes(); // Number
获取或者设置小时,设置的范围0到23
moment().hour(Number);moment().hour(); // Numbermoment().hours(Number);moment().hours(); // Number
获取或者设置日期,设置的范围1到31
moment().date(Number);moment().date(); // Numbermoment().dates(Number);moment().dates(); // Number
获取或者设置星期,设置的范围0(周日)到6(周六)
moment().day(Number|String);moment().day(); // Numbermoment().days(Number|String);moment().days(); // Number
获取或者设置一年中的天数,设置的范围1到366
moment().dayOfYear(Number);moment().dayOfYear(); // Number
获取或者设置一年中的周
moment().week(Number);moment().week(); // Numbermoment().weeks(Number);moment().weeks(); // Number
获取或者设置一年中的月份,设置的范围0到11
moment().month(Number|String);moment().month(); // Numbermoment().months(Number|String);moment().months(); // Number
获取或者设置季度,设置的范围1到4
moment().quarter(); // Numbermoment().quarter(Number);
获取或者设置年,设置的范围-270000到270000
moment().year(Number);moment().year(); // Numbermoment().years(Number);moment().years(); // Number
取值and赋值函数
除了上面的这么多函数外,MomentJS还有一个用来统一取值和赋值的函数,get和set。
moment().get('year');moment().get('month'); // 0 to 11moment().get('date');moment().get('hour');moment().get('minute');moment().get('second');moment().get('millisecond');
set函数接收单位作为第一个参数,单位的值作为第二个参数。如果要设置多个值的话,也可以通过传入一个对象。
moment().set('year', 2013);moment().set('month', 3); //四月moment().set('date', 1);moment().set('hour', 13);moment().set('minute', 20);moment().set('second', 30);moment().set('millisecond', 123);moment().set({'year': 2013, 'month': 3});
max/min函数
max函数可以返回给定的moment对象中最大的实例,也就是最靠近未来的实例。
var a = moment('2017-12-01');var b = moment('2017-12-06');moment.max(a, b); // b
min函数可以返回给定的moment对象中最小的实例,也就是最靠近过去的实例。
var a = moment('2017-12-01');var b = moment('2017-12-06');moment.min(a, b); // a
操作
有时候,我们需要对时间进行一系列的操作,最常见的就是加减计算。MomentJS提供了很多方法给我们来进行调用。 MomentJS使用的模式跟jQuery相似,都是使用的函数的链式调用,可以让我们将操作链式执行下去,代码如下所示:
moment() .add(7, 'days') .subtract(1, 'months') .year(2009) .hours(0) .minutes(0) .seconds(0);
add加法
add函数让我们把Moment对象的时间往后退,它的语法如下:
moment().add(Number, String);moment().add(Duration);moment().add(Object);
我们可以传入想要的增加的时间数量和时间单位,比如要往后推迟7天:
moment().add(7, 'days');
当然,add函数也允许我们提供时间单位的缩写:
moment().add(7, 'd');
如果想要同时增加不同时间单位,可以以对象的形式传入:
moment().add(7, 'days').add(1, 'months');moment().add({days:7,months:1});
需要注意的是,如果原始日期的天数比新增后的日期的月份的总天数还要多,就变为该月的最后一天:
// 01-31moment([2010, 0, 31]); // 02-28 moment([2010, 0, 31]).add(1, 'months'); //2月份没有31号,自动变为最后一天,即28号
subtract减法
subtract函数的用法和add相似,不同的是把时间往前推。
moment().subtract(Number, String);moment().subtract(Duration);moment().subtract(Object);
startOf开始时间
startOf函数将Moment对象的时间设置为传入单位的开始时间。
moment() //当前时间2017-12-09moment().startOf('year'); //今年年初2017-01-01moment().startOf('month'); //这个月开始2017-12-01moment().startOf('quarter');//这个季度开始2017-10-01moment().startOf('week'); //这周开始2017-12-03(周日为开始)moment().startOf('isoWeek');//这周开始2017-12-04(根据ISO 8601,周一为开始)moment().startOf('day'); //今天的开始时间2017-12-09 00:00:00:000moment().startOf('hour'); //今天当前小时开始2017-12-09 13:00:00:000moment().startOf('minute'); //今天当前分钟开始2017-12-09 13:14:00:000moment().startOf('second'); //今天当前秒钟开始2017-12-09 13:14:15:000
endOf结束时间
endOf函数将Moment对象的时间设置为传入单位的结束时间。使用方式和startOf相似。
moment().endOf(String);
显示
当我们解析和操作完Moment对象后,我们就需要对最后的结果进行展示。
format格式化
format函数接收token字符串,并且将token替换成对应的值。
moment().format(); // "2014-09-08T08:02:17-05:00" (ISO 8601)moment().format("dddd, MMMM Do YYYY, h:mm:ss a"); // "Sunday, February 14th 2010, 3:25:50 pm"moment().format("ddd, hA"); // "Sun, 3PM"
对应的关系如下表:
diff时差
语法
moment().diff(Moment|String|Number|Date|Array);moment().diff(Moment|String|Number|Date|Array, String);moment().diff(Moment|String|Number|Date|Array, String, Boolean);
diff函数可以帮我们获取到两个Moment对象的时间差,默认的单位是毫秒。
var a = moment([2017, 12, 29]);var b = moment([2017, 12, 28]);a.diff(b) // 86400000
除了得到毫秒为单位,diff函数还支持获取其他的时间单位,将其作为第二个参数传入:
var a = moment([2007, 0, 29]);var b = moment([2007, 0, 28]);a.diff(b, 'days') // 1
支持的测量单位有years、months、weeks、days、hours、minutes、seconds和milliseconds。默认返回的数值会向下取舍,去掉小数。假如想要精确一点,得到小数类型的数值,第三个参数传入一个true。
var a = moment([2008, 6]);var b = moment([2007, 0]);a.diff(b, 'years'); // 1a.diff(b, 'years', true); // 1.5
daysInMonth获取当前月份的天数
daysInMonth获取当前月的总天数
moment("2012-02", "YYYY-MM").daysInMonth() // 29moment("2012-01", "YYYY-MM").daysInMonth() // 31
toDate转为Date对象
将Moment对象转为js原生的Date对象
toArray转为数组
返回时间数组,和构造Moment对象时传入的数组代表的含义相同。
moment().toArray(); // [2017, 12, 9, 13, 40, 16, 154];
toObject
将Moment对象转为包含年月日时分秒毫秒的对象。
moment().toObject() // { // years: 2017 // months: 12 // date: 9, // hours: 13, // minutes: 40, // seconds: 18, // milliseconds: 600 // }
查询
查询操作主要用来判断Moment是否满足某些条件。
isBefore是否之前
moment().isBefore(Moment|String|Number|Date|Array);moment().isBefore(Moment|String|Number|Date|Array, String);
isBefore判断一个moment对象是否在某个时间点之前。
moment('2010-10-20').isBefore('2010-10-21'); // true
默认的比较单位是毫秒,但是假如我们想要限制到其他的时间单位,我们可以将其作为第二个参数传入。接受的单位和startOf支持的单位一样。
console.log(moment('2017-11-03').isBefore('2017-11-06'))console.log(moment('2017-11-03').isBefore('2017-11-06', 'year'))console.log(moment('2017-11-03').isBefore('2018-11-06', 'year'))
isSame是否相同
moment().isSame(Moment|String|Number|Date|Array);moment().isSame(Moment|String|Number|Date|Array, String);
isSame判断一个moment对象是否和另一个moment对象相同。
moment('2010-10-20').isSame('2010-10-20'); // truemoment('2010-10-20').isSame('2010-10-21'); // false
同样的,我们如果要将比较的单位改为其他的,也可以作为第二个参数传入。接受的单位和startOf支持的单位一样。
moment('2010-10-20').isSame('2009-12-31', 'year'); // falsemoment('2010-10-20').isSame('2010-01-01', 'year'); // true
当传入第二个参数时,它会匹配所有相同或者更大的单位。比如传入了月份,将会比较年和月,传入了日期,将会比较年月日
// false, 不同的年moment('2010-01-01').isSame('2011-01-01', 'month');// false, 不同的月moment('2010-01-01').isSame('2010-02-01', 'day');
isAfter是否之后
isBefore判断一个moment对象是否在某个时间点之后。接受的单位和startOf支持的单位一样。
moment('2010-10-20').isAfter('2010-10-19'); // true
isBetween是否之间
moment().isBetween(moment-like, moment-like);moment().isBetween(moment-like, moment-like, String);//moment-like 表示 Moment|String|Number|Date|Array
判断一个moment对象是否在两个其他时间点之间。
moment('2017-10-20').isBetween('2017-10-19', '2017-10-25'); // true
传入第二个参数作为限制的单位。接受的单位和startOf支持的单位一样。
moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year'); // falsemoment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year'); // true
isLeapYear是否闰年
是闰年就返回true,不是就返回false。
moment([2000]).isLeapYear() // truemoment([2001]).isLeapYear() // falsemoment([2100]).isLeapYear() // false
isMoment 是否Moment对象
判断是否Moment对象
moment.isMoment() // falsemoment.isMoment(new Date()) // falsemoment.isMoment(moment()) // true
isDate是否Date对象
判断是否Date对象
moment.isDate(); // falsemoment.isDate(new Date()); // truemoment.isDate(moment()); // false
作者:谢小飞
链接:https://juejin.im/post/5a2bdc55f265da432b4abf5e
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- JS时间处理插件MomentJS
- momentJS时间加减处理
- nodejs时间处理工具momentjs
- 时间格式化插件http://momentjs.com/
- 强大的时间/日期格式化插件 momentJs
- js 时间库 http://momentjs.com/
- momentjs如何格式化时间差值
- js处理时间插件 时间格式:年月日时分秒
- JavaScript时间处理插件
- js时间插件
- js时间插件
- js时间控件插件
- js时间插件
- Js时间插件
- js 时间插件使用
- js 时间处理
- js 时间戳处理
- Js 时间处理总结
- qt复杂操作保持响应
- PHP 实现数字转字母,生成Excel列标
- android http 同步请求
- java 远程连接hadoop集群
- 欢迎使用CSDN-markdown编辑器
- JS时间处理插件MomentJS
- mac下idea中没有maven的问题
- squid,Varnish,nginx cache,ats,btw 区别
- lintcode第一题 A+B问题
- 17年将至,一个来自25岁程序员的迷茫
- Get全栈技能点 Vue2.0Node.jsMongoDB 打造商城系统
- vue 路由传值 query 和 params
- Hive报错SemanticException Error in parsing
- HDU 5701 中位数计数 (思维)