精华内容
下载资源
问答
  • Moment.js
    2020-08-29 06:21:44

    moment.min.js

    Moment.js is an awesome JavaScript library that helps you manage dates, in the browser and in Node.js as well.

    Moment.js是一个很棒JavaScript库,可帮助您在浏览器和Node.js中管理日期。

    This article aims to explain the basics and the most common usages of this library.

    本文旨在解释该库的基础知识和最常用的用法。

    安装 (Installation)

    You can include it directly in your page using a script tag, from unpkg.com:

    您可以使用脚本标签直接从unpkg.com将其包含在页面中:

    <script src="https://unpkg.com/moment" />

    or using npm:

    或使用npm

    npm install moment

    If you install using npm you need to import the package (using ES Modules):

    如果使用npm安装,则需要导入软件包(使用ES Modules ):

    import moment from 'moment'

    or require it (using CommonJS):

    或要求它(使用CommonJS ):

    const moment = require('moment')

    获取当前日期和时间 (Get the current date and time)

    const date = moment()

    解析日期 (Parse a date)

    A moment object can be initialized with a date by passing it a string:

    可以通过将一个字符串对象传递给一个日期来对其进行初始化:

    const date = moment(string)

    it accepts any string, parsed according to (in order):

    它接受根据(按顺序)解析的任何字符串:

    ISO 8601 is definitely the most convenient. Here’s a format reference:

    ISO 8601绝对是最方便的。 这是格式参考:

    FormatMeaningExample
    YYYY4-digits Year2018
    YY2-digits Year18
    M2-digits Month number, omits leading 07
    MM2-digits Month number07
    MMM3-letters Month nameJul
    MMMMFull Month nameJuly
    ddddFull day nameSunday
    gggg4-digits Week year2018
    gg2-digits Week year18
    wWeek of the year without leading zero18
    wwWeek of the year with leading zero18
    eDay of the week, starts at 04
    D2-digits day number, omits leading 09
    DD2-digits day number09
    DoDay number with ordinal9th
    TIndicates the start of the time part
    HH2-digits hours (24 hour time) from 0 to 2322
    H2-digits hours (24 hour time) from 0 to 23 without leading 022
    kk2-digits hours (24 hour time) from 1 to 2423
    k2-digits hours (24 hour time) from 1 to 24 without leading 023
    a/Aam or pmpm
    hh2-digits hours (12 hour time)11
    mm2-digits minutes22
    ss2-digits seconds40
    s2-digits seconds without leading zero40
    S1-digits milliseconds1
    SS2-digits milliseconds12
    SSS3-digits milliseconds123
    ZThe timezone+02:00
    xUNIX timestamp in milliseconds1410432140575
    格式 含义
    YYYY 4位数字年份 2018年
    YY 两位数年份 18
    中号 2位数字月份号,省略前导0 7
    MM 2位数字月份号 07
    MMM 3个字母的月份名称 七月
    MMMM 全月名称 七月
    dddd 全日名称 星期日
    gggg 4位数字的周年 2018年
    gg 2位数字的星期年 18
    w 一年中的星期,不带零 18
    w 一年中的前零周 18
    Ë 星期几,从0开始 4
    d 2位日数字,省略前导0 9
    DD 2位数的日号 09
    带序号的天数 第九名
    Ť 指示时间部分的开始
    H 2位数小时(24小时制),从0到23 22
    H 2位数小时(24小时制),从0到23,前导0 22
    kk 2位数小时(24小时制),从1到24 23
    ķ 2位数小时(24小时制),从1到24,不加0 23
    A / A ampm 下午
    h 2位数小时(12小时制) 11
    毫米 2位数字分钟 22
    ss 2位数秒 40
    s 2位秒,不带前导零 40
    小号 1位数毫秒 1个
    SS 2位毫秒 12
    SSS 3位数毫秒 123
    ž 时区 +02:00
    X UNIX时间戳(以毫秒为单位) 1410432140575

    设定日期 (Set a date)

    格式化日期 (Format a date)

    When you want to output the content of a plain JavaScript Date object, you have little options to determine the formatting. All you can do is to use the built-in methods, and compose the date as you want using them.

    当您要输出纯JavaScript Date对象的内容时,几乎没有选择来确定格式。 您所能做的就是使用内置方法,并根据需要编写日期。

    Moment offers a handy way to format the date according to your needs, using the format() method:

    Moment提供了一种方便的方式,可以使用format()方法根据您的需要格式化日期:

    date.format(string)

    The string format accepts the same formats I described in the “Parse a date” section above.

    字符串格式接受与我上面“解析日期”一节中描述的格式相同的格式。

    Example:

    例:

    moment().format("YYYY Do MM")

    Moment provides some constants you can use instead of writing your own format:

    Moment提供了一些常量,您可以使用它们来代替编写自己的格式:

    ConstantFormatExample
    moment.HTML5_FMT.DATETIME_LOCALYYYY-MM-DDTHH:mm2017-12-14T16:34
    moment.HTML5_FMT.DATETIME_LOCAL_SECONDSYYYY-MM-DDTHH:mm:ss2017-12-14T16:34:10
    moment.HTML5_FMT.DATETIME_LOCAL_MSYYYY-MM-DDTHH:mm:ss.SSS2017-12-14T16:34:10.234
    moment.HTML5_FMT.DATEYYYY-MM-DD2017-12-14
    moment.HTML5_FMT.TIMEHH:mm16:34
    moment.HTML5_FMT.TIME_SECONDSHH:mm:ss16:34:10
    moment.HTML5_FMT.TIME_MSHH:mm:ss.SSS16:34:10.234
    moment.HTML5_FMT.WEEKYYYY-[W]WW2017-W50
    moment.HTML5_FMT.MONTHYYYY-MM2017-12
    不变 格式
    moment.HTML5_FMT.DATETIME_LOCAL YYYY-MM-DDTHH:mm 2017-12-14T16:34
    moment.HTML5_FMT.DATETIME_LOCAL_SECONDS YYYY-MM-DDTHH:mm:ss 2017-12-14T16:34:10
    moment.HTML5_FMT.DATETIME_LOCAL_MS YYYY-MM-DDTHH:mm:ss.SSS 2017-12-14T16:34:10.234
    moment.HTML5_FMT.DATE YYYY-MM-DD 2017-12-14
    moment.HTML5_FMT.TIME 高度:毫米 16:34
    moment.HTML5_FMT.TIME_SECONDS HH:mm:ss 16:34:10
    moment.HTML5_FMT.TIME_MS HH:mm:ss.SSS 16:34:10.234
    moment.HTML5_FMT.WEEK YYYY- [W] WW 2017-W50
    moment.HTML5_FMT.MONTH YYYY-MM 2017-12

    验证日期 (Validating a date)

    Any date can be checked for validity using the isValid() method:

    可以使用isValid()方法检查任何日期的有效性:

    moment('2018-13-23').isValid() //false
    moment('2018-11-23').isValid() //true

    时间以前,直到日期 (Time ago, time until date)

    Use fromNow(). Strings are localized:

    使用fromNow() 。 字符串已本地化:

    moment('2016-11-23').fromNow() //2 years ago
    moment('2018-05-23').fromNow() //a month ago
    moment('2018-11-23').fromNow() //in 5 months

    if you pass true to fromNow(), it just shows the difference, without reference to future/past.

    如果将true传递给fromNow(),它将仅显示差异,而不会引用future / past。

    moment('2016-11-23').fromNow(true) //2 years
    moment('2018-05-23').fromNow(true) //a month
    moment('2018-11-23').fromNow(true) //5 months

    处理日期 (Manipulate a date)

    You can add or subtract any amount of time to a date:

    您可以在日期中增加或减少任何时间:

    moment('2016-11-23').add(1, 'years')
    moment('2016-11-23').subtract(1, 'years')

    You can use those values:

    您可以使用这些值:

    • years

      years

    • quarters

      quarters

    • months

      months

    • weeks

      weeks

    • days

      days

    • hours

      hours

    • minutes

      minutes

    • seconds

      seconds

    • milliseconds

      milliseconds

    翻译自: https://flaviocopes.com/momentjs/

    moment.min.js

    更多相关内容
  • moment.js文件下载

    2020-05-07 11:30:54
    Moment.js是一个轻量级的JavaScript时间库,日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。接下来,我将按照这些操作对Moment.js中的Doc进行整理分类,方便学习...
  • http://momentjs.com/ 选moment.min.js版本,因为没有用到国际化的东西,体积省点是一点。   2.集成 将moment.min.js放在小程序工程的utils目录下   3.调用 const moment = require('moment.min.js'); moment....
  • Moment.js是一个JavaScript的日期、时间处理工具类,其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用,也可以在Node.js中。 Moment.js Moment.js对Date对象的扩展不是使用Date....
  • 安装npm install bower install gulp compile或gulp用法创造创建日历(基于今天的日期): var cal = moment . calendar ( ) ; 或者设置一个工作日期: var cal = moment . calendar ( "2014-11-01" ) ;日历模型日历...
  • moment-interval 向moment对象以及Moment和Duration实例添加方法,让您可以在其他一些常见的时间处理任务中执行此操作。 Interval moment.interval(字符串) 通过以的形式指定一个字符串来创建一个 I
  • moment-locales-webpack-plugin使用webpack构建时轻松删除未使用的Moment.js语言环境为什么Moment.js大小的75%(160个最小KBs)¹是用于本地化的文件。 当您使用moment-locales-webpack-plugin时,它们总是包含在内...
  • IANA时区对Moment.js的支持 项目状态 Moment-Timezone是Moment.js的附加组件。 两者都被视为旧项目,现在处于维护模式。 在大多数情况下,您应该选择其他库。 有关更多详细信息和建议,请参阅Moment文档中的“”。 ...
  • 片刻假期 用于处理假期的插件。...moment.js v2.0.0或更高版本 安装 节点.js npm install --save moment-holiday var moment = require ( 'moment-holiday' ) ; moment ( ) . holiday ( 'Chr
  • 主要介绍了moment.js轻松实现获取当前日期是当年的第几周,需要的朋友可以参考下
  • moment().format('YYYY-MM-DD HH:mm:ss') 获取当前时间 并格式化
  • 时刻 于项目的便捷过滤器。 安装 通过NPM安装......$ npm install vue-moment ...... Vue . use ( require ( 'vue-moment' ) ) ;...只需将moment设置为过滤功能,...Moment.js希望您输入的内容为:有效的ISO 8601格式的字符串
  • 要求 v2.1.0 或更高版本安装节点.js npm install --save moment-weekdaysin var moment = require ( 'moment-weekdaysin' ) ;moment ( ) . weekdaysInMonth ( 'Monday' ) ;浏览器 < script src =" moment.js " &...
  • 基于moment.js日期选择器插件是一款DatePicker是基于moment.js的日期选择器插件,支持小时、日、周、月、季、年的日期选择方式。
  • moment.js替代方案的微小评估 背景 “ Moment.js已成功用于数百万个项目,我们很高兴为改善网络上的日期和时间做出了贡献。截至2020年9月,Moment每周获得超过1200万次下载!但是,Moment是为JavaScript生态系统的...
  • moment.min.js

    2020-06-01 23:26:07
    可以提供不同语种、多种类的时间规格化的方法,可以处理多种的时间格式。在js中进行很好的处理,也能在前端进行页面渲染时进行处理。可以下载试试。
  • Moment.js

    2022-07-07 15:28:40
    Moment.jsJavaScript 日期处理类库)

    Moment.js (JavaScript 日期处理类库)官网

    一、日期格式化

    moment().format('MMMM Do YYYY, h:mm:ss a'); // 七月 7日 2022, 11:27:31 上午
    moment().format('dddd');                    // 星期四
    moment().format("MMM Do YY");               // 7月 7日 22
    moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
    moment().format();                          // 2022-07-07T11:27:31+08:00
    

    二、相对时间

    moment("20111031", "YYYYMMDD").fromNow(); // 11 年前
    moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
    moment().startOf('day').fromNow();        // 11 小时前
    moment().endOf('day').fromNow();          // 13 小时内
    moment().startOf('hour').fromNow();       // 28 分钟前
    

    三、日历时间

    moment().subtract(10, 'days').calendar(); // 2022/06/27
    moment().subtract(6, 'days').calendar();  // 上星期五11:27
    moment().subtract(3, 'days').calendar();  // 上星期一11:27
    moment().subtract(1, 'days').calendar();  // 昨天11:27
    moment().calendar();                      // 今天11:27
    moment().add(1, 'days').calendar();       // 明天11:27
    moment().add(3, 'days').calendar();       // 下星期日11:27
    moment().add(10, 'days').calendar();      // 2022/07/17
    

    四、多语言支持

    moment.locale();         // zh-cn
    moment().format('LT');   // 11:27
    moment().format('LTS');  // 11:27:31
    moment().format('L');    // 2022/07/07
    moment().format('l');    // 2022/7/7
    moment().format('LL');   // 2022年7月7日
    moment().format('ll');   // 2022年7月7日
    moment().format('LLL');  // 2022年7月7日上午11点27分
    moment().format('lll');  // 2022年7月7日 11:27
    moment().format('LLLL'); // 2022年7月7日星期四上午11点27分
    moment().format('llll'); // 2022年7月7日星期四 11:27
    

    五、获取当前时间

    moment().get('year');	// 2022(年)
    moment().get('month');  // 6 0 至 11(月份)
    moment().get('date');	// 7 (日期)
    moment().get('hour');	// 13(小时)
    moment().get('minute');	// 14(分钟)
    moment().get('second');	// 15(秒)
    moment().get('millisecond'); // 222 毫秒
    

    六、查询

    6.1 isBefore()

    检查一个 moment 是否在另一个 moment 之前。

    第一个参数会被解析为 moment (如果尚未解析)。

    moment('2010-10-20').isBefore('2010-10-21'); // true
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第二个参数传入。

    由于第二个参数用于确定精确度,且不仅仅是要检查单个值,因此使用 day 将会检查年份、月份、日期。

    moment('2010-10-20').isBefore('2010-12-31', 'year'); // false
    moment('2010-10-20').isBefore('2011-01-01', 'year'); // true
    

    moment#isAftermoment#isSame 一样,moment#startOf 支持的任何时间单位也适用于 moment#isBefore

    year month week isoWeek day hour minute second
    

    6.2 isSame()

    检查一个 moment 是否与另一个 moment 相同。

    第一个参数会被解析为 moment(如果尚未解析)。

    moment('2010-10-20').isSame('2010-10-20'); // true
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第二个参数传入。

    moment('2010-10-20').isSame('2009-12-31', 'year');  // false
    moment('2010-10-20').isSame('2010-01-01', 'year');  // true
    moment('2010-10-20').isSame('2010-12-31', 'year');  // true
    moment('2010-10-20').isSame('2011-01-01', 'year');  // false
    

    当包含第二个参数时,则它将会匹配所有等于或更大的单位。 传入 month 将会检查 monthyear。 传入 day 将会检查 daymonthyear

    moment('2010-01-01').isSame('2011-01-01', 'month'); // false, 不同的年份
    moment('2010-01-01').isSame('2010-02-01', 'day');   // false, 不同的月份
    

    6.3 isAfter()

    检查一个 moment 是否在另一个 moment 之后。

    第一个参数会被解析为 moment(如果尚未解析)。

    moment('2010-10-20').isAfter('2010-10-19'); // true
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第二个参数传入。

    由于第二个参数用于确定精度,且不仅仅是要检查的单个值,因此使用 day 将会检查年份、月份、日期。

    moment('2010-10-20').isAfter('2010-01-01', 'year'); // false
    moment('2010-10-20').isAfter('2009-12-31', 'year'); // true
    

    moment#isSamemoment#isBefore 一样,moment#startOf 支持的任何时间单位也适用于 moment#isAfter

    year month week isoWeek day hour minute second
    

    如果未将任何内容传给 moment#isAfter,则它将会默认为当前时间。

    moment().isAfter(); // false
    

    6.4 isSameOrBefore()

    检查一个 moment 是否在另一个 moment 之前或与之相同。

    第一个参数会被解析为 moment(如果尚未解析)。

    moment('2010-10-20').isSameOrBefore('2010-10-21');  // true
    moment('2010-10-20').isSameOrBefore('2010-10-20');  // true
    moment('2010-10-20').isSameOrBefore('2010-10-19');  // false
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第二个参数传入。

    由于第二个参数用于确定精度,且不仅仅是要检查的单个值,因此使用 day 将会检查年份、月份、日期。

    moment('2010-10-20').isSameOrBefore('2009-12-31', 'year'); // false
    moment('2010-10-20').isSameOrBefore('2010-12-31', 'year'); // true
    moment('2010-10-20').isSameOrBefore('2011-01-01', 'year'); // true
    

    6.5 isSameOrAfter()

    检查一个 moment 是否在另一个 moment 之后或与之相同。 第一个参数会被解析为 moment(如果尚未解析)。

    moment('2010-10-20').isSameOrAfter('2010-10-19'); // true
    moment('2010-10-20').isSameOrAfter('2010-10-20'); // true
    moment('2010-10-20').isSameOrAfter('2010-10-21'); // false
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第二个参数传入。

    由于第二个参数用于确定精度,且不仅仅是要检查的单个值,因此使用 day 将会检查年份、月份、日期。

    moment('2010-10-20').isSameOrAfter('2011-12-31', 'year'); // false
    moment('2010-10-20').isSameOrAfter('2010-01-01', 'year'); // true
    moment('2010-10-20').isSameOrAfter('2009-12-31', 'year'); // true
    

    6.5 isBetween()

    检查一个 moment 是否在其他两个 moment 之间,可选地检查指定的单位刻度(分钟,小时,日期等)。 这个匹配是排他的。 前两个参数会被解析为 moment(如果尚未解析)。

    moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
    moment('2010-10-20').isBetween('2010-10-19', undefined); // true, 因为 moment(undefined) 等效于 moment()
    

    如果要将粒度限制为毫秒以外的单位,则将单位作为第三个参数传入。

    moment('2010-10-20').isBetween('2010-01-01', '2012-01-01', 'year'); // false
    moment('2010-10-20').isBetween('2009-12-31', '2012-01-01', 'year'); // true
    

    moment#isSamemoment#isBeforemoment#isAfter 一样,moment#startOf 支持的任何时间单位也适用于 moment#isBetween。 年份、月份、星期、ISO星期、日期、小时、分钟、秒钟。

    2.13.0 版本引入了包容性。 [ 表示包含。 ( 表示排除。 如果使用包容性参数,则必须传入两个指示符。

    moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '()'); //false
    moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '[)'); //true
    moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '()'); //false
    moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '(]'); //true
    moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '[]'); //true
    

    注意,如果 fromto 参数相同,但包容性参数不同,则将会返回 false。

    moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '(]'); //false
    

    如果未指定包容性参数,则 Moment 将会默认为 ()

    6.6 isDST()

    moment().isDST();
    

    moment#isDST 检查当前时刻是否为夏令时(daylight saving time)。

    moment([2011, 2, 12]).isDST(); // false, 2011年3月12日不是 DST。
    moment([2011, 2, 14]).isDST(); // true, 2011年3月14日是 DST。
    // 此示例适用于 "en" 语言环境:https://www.timeanddate.com/time/dst/2011.html
    

    6.7 isLeapYear()

    moment().isLeapYear();
    

    如果该年是闰年,则 moment#isLeapYear 返回 true,否则返回 false

    moment([2000]).isLeapYear() // true
    moment([2001]).isLeapYear() // false
    moment([2100]).isLeapYear() // false
    

    6.8 isMoment()

    moment.isMoment(obj);
    

    要检查变量是否为 moment 对象,则使用 moment.isMoment()

    moment.isMoment() // false
    moment.isMoment(new Date()) // false
    moment.isMoment(moment()) // true
    

    2.11.0 版本开始,还可以通过 instanceof 运算符检测 moment 对象:

    moment() instanceof moment // true
    

    6.9 isDate()

    moment.isDate(obj);
    

    要检查变量是否为原生 js Date 对象,则使用 moment.isDate()

    moment.isDate(); // false
    moment.isDate(new Date()); // true
    moment.isDate(moment()); // false
    
    展开全文
  • Moment.js 是一个简单易用的轻量级JavaScript日期处理类库,提供了日期格式化、日期解析等功能。它支持在浏览器和NodeJS两种环境中运行。此类库能够将给定的任意日期转换成多种不同的格式,具有强大的日期计算功能,...
  • 节点/ NPM 通过npm安装: npm install --save moment-range ES6: import Moment from 'moment' ;import { extendMoment } from 'moment-range' ;const moment = extendMoment ( Moment ) ; 打字稿: import * as ...
  • 片刻假期 moment.js 的插件提供了一些有用的功能来查找年假。 例如 moment.easterDate() 需要 moment.js,请参阅以及以获取文档。
  • 它的API与Moment.js的API在很大程度上兼容,因此,如果您知道如何使用Moment.js,就会知道如何使用Day.js。 为什么选择Day.js? 因为它只有2kB,所以它减少了下载,解析和执行JavaScript的时间,并花费了更多的时间...
  • 生成一个新的随机moment.js对象 安装 确保您安装了片刻 npm或纱 $ npm install --save moment-random $ yarn add moment-random 用法 像其他任何图书馆一样要求它 const momentRandom = require ( 'moment-...
  • 使用这个类库,可以帮助你有效的处理相关日期。希望大家喜欢! 主要特性: 3.2kb超轻量级 独立... 代码如下: var now = moment(); console.log(now.format(‘dddd, MMMM Do YYYY, h:mm:ss a’)); 代码如下: ar hallowe
  • 主要为大家详细介绍了Moment.js实现多个同时倒计时,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • jQueryDatePicker是一款基于moment.js的jQuery日期选择器插件。该日期选择器插件使用moment.js来解析,校验和格式化日期时间,并提供ES5和ES6两种版本。
  • 该库仅将代币转换为原始的momentjs令牌。 兼容性 浏览器(在Chrome,Firefox,Opera上测试) Nodejs的 安装方式 实际上,您可以下载原始的moment-tokens.js或克隆此存储库。 在不久的将来,我将为nodejs用户将此...
  • Moment.js & Day.js 时间日期类库

    千次阅读 2021-05-22 01:36:01
    Moment.js & Day.js 时间日期类库 文章目录Moment.js & Day.js 时间日期类库前言正文0. 环境配置0.1 安装依赖0.2 辅助工具函数1. Moment.js1.1 创建时间日期对象1.2 获取/设置属性1.3 日期操作(加、减、对齐...

    Moment.js & Day.js 时间日期类库

    前言

    在项目开发的时候,日期时间处理是一个非常常见的需求。然而问题在于 JS 原生的 Date 对象操作其实不太方便,因此延伸出了许多三方库用于封装 Date 对象,以及推动新的日期标准 Intl 的制定和实现。

    本篇挑出三方库中大名鼎鼎的 moment.js 和 day.js 做介绍

    正文

    0. 环境配置

    本篇实例运行在 node 环境,先来配置一下环境和依赖

    0.1 安装依赖

    $ yarn init -y  # 初始化项目
    $ yarn add moment dayjs  # 安装核心依赖
    

    以及运行测试命令

    • package.json
    {
      "name": "moment-dayjs",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "scripts": {
        "dayjs": "node src/dayjs/index.js",
        "moment": "node src/moment/index.js"
      },
      "dependencies": {
        "dayjs": "^1.10.4",
        "moment": "^2.29.1"
      }
    }
    

    0.2 辅助工具函数

    同时我们先定义一下后面会用到的工具函数,避免误解

    • src/utils/group.js
    const emptyFn = () => {}
    
    const log = console.log
    
    function group(name, cb = emptyFn) {
      console.group(name)
      cb()
      console.groupEnd()
    }
    
    module.exports = {
      log,
      group,
    }
    

    logconsole.log 的别名,group 方法对 console.group 稍微封装一下

    1. Moment.js

    第一个我们首先来介绍 Moment.js 提供的日期时间操作能力,主要分成以下几个大类介绍一些比较常见的功能需求和用法

    • 创建时间日期对象
    • 获取/设置属性
    • 日期操作(加、减、对齐、选择)
    • 查询(判断、比较)
    • 格式化输出

    1.1 创建时间日期对象

    一开始当然是先创建 moment.js 定义的新的时间对象,直接使用 moment 方法构造

    • src/moment/1_parse.js
    const moment = require('moment')
    const { log, group } = require('../utils/group')
    
    group('moment.js parse', () => {
      group('moment', () => {
        log(`moment():                            ${moment().format()}`)
        log(`moment('2021-11-01'):                ${moment('2021-11-01').format()}`)
        log(`moment('2021-11-01 23:59:59'):       ${moment('2021-11-01 23:59:59').format()}`)
        log(`moment('20211101T235959'):           ${moment('20211101T235959').format()}`)
        log(`moment('01-11-2021', 'DD-MM-YYYY'):  ${moment('01-11-2021', 'DD-MM-YYYY').format()}`)
        log(`moment([2021, 10, 1, 23, 59, 59]):   ${moment([2021, 10, 1, 23, 59, 59]).format()}`)
      })
      
    // ...
    

    传入的内容还是比较自由,主要以字符串描述为主,可用函数标签如下

    moment()        // 当前时间
    moment(string)  // UTC 或 ISO 格式的时间描述字符串
    moment(string, string)  // 第二个参数作为自定义字符串模版
    moment(number)  // 传入时间戳
    moment(array)   // 按序传入时间描述
    

    看输出吧

    moment.js parse
      moment
        moment():                            2021-05-21T14:37:10+08:00
        moment('2021-11-01'):                2021-11-01T00:00:00+08:00
        moment('2021-11-01 23:59:59'):       2021-11-01T23:59:59+08:00
        moment('20211101T235959'):           2021-11-01T23:59:59+08:00
        moment('01-11-2021', 'DD-MM-YYYY'):  2021-11-01T00:00:00+08:00
        moment([2021, 10, 1, 23, 59, 59]):   2021-11-01T23:59:59+08:00
    

    还是比较简单直接的,另外由于 moment 对象的操作常常会直接改变对象实例,所以我们还需要另一个 clone 方法来拷贝对象进行复用

    // ...
    
      group('clone', () => {
        const m1 = moment()
        const m2 = moment(m1)
        const m3 = m2.clone()
        log(`m1:  ${m1.toString()}`)
        log(`m2:  ${m2.toString()}`)
        log(`m3:  ${m3.toString()}`)
        log(`m1 === m2:                        ${m1 === m2}`)
        log(`m1 === m3:                        ${m1 === m3}`)
        log(`m2 === m3:                        ${m2 === m3}`)
        log(`m1.toString() === m2.toString():  ${m1.toString() === m2.toString()}`)
        log(`m1.toString() === m3.toString():  ${m1.toString() === m3.toString()}`)
        log(`m2.toString() === m3.toString():  ${m2.toString() === m3.toString()}`)
      })
    })
    

    我们可以直接调用 moment(instance) 或是 moment.clone() 来创建实例副本

    1.2 获取/设置属性

    第二个模块则是介绍对于时间日期属性的获取和直接设置

    首先我们给出几个函数标签

    // moment# 表示 moment.prototype 的原型方法
    moment#[unit]()   // 获取指定单位(unit) 的值
    moment#set(unit)  // 获取指定单位(unit) 的值
    moment#[unit](val)     // 设置指定单位(unit) 的值
    moment#set(unit, val)  // 设置指定单位(unit) 的值
    

    我们可以透过直接调用指定单位来获取/设置属性值,或是调用 get/set 方法并传入目标属性字符串来进行调用

    • src/moment/2_getter_setter.js
    const moment = require('moment')
    const { log, group } = require('../utils/group')
    
    group('moment.js getter/setter', () => {
      const origin = moment('2021-11-01 23:59:59.699')
    
      let time = origin.clone()
    
      group('second', () => {
        log(`time:              ${time}`)
        log(`time.second():     ${time.second()}`)
        log(`time.second(996):  ${time.second(30)}`)
        log(`time.second():     ${time.second()}`)
      })
    
      group('hour', () => {
        log(`time:          ${time}`)
        log(`time.hour():   ${time.hour()}`)
        log(`time.hour(1):  ${time.hour(1)}`)
        log(`time.hour():   ${time.hour()}`)
      })
    
      time = origin.clone()
    
      group('get/set', () => {
        log(`current time:             ${time}`)
        log(`time.get('year'):         ${time.get('year')}`)
        log(`time.get('month'):        ${time.get('month')}`)
        log(`time.get('date'):         ${time.get('date')}`)
        log(`time.get('day'):          ${time.get('day')}`)
        log(`time.get('hour'):         ${time.get('hour')}`)
        log(`time.get('minute'):       ${time.get('minute')}`)
        log(`time.get('second'):       ${time.get('second')}`)
        log(`time.get('millisecond'):  ${time.get('millisecond')}`)
    
        log(`time.set('year', 2022):      ${time.set('year', 2022)}`)
        log(`time.set('month', 0):        ${time.set('month', 0)}`)
        log(`time.set('date', 13):        ${time.set('date', 13)}`)
        log(`time.set('day', 1):          ${time.set('day', 1)}`)
        log(`time.set('hour', 1):         ${time.set('hour', 1)}`)
        log(`time.set('minute', 3):       ${time.set('minute', 3)}`)
        log(`time.set('second', 5):       ${time.set('second', 5)}`)
        log(`time.set('millisecond', 7):  ${time.set('millisecond', 7)}`)
      })
    })
    
    • 输出
    moment.js getter/setter
      second
        time:              Mon Nov 01 2021 23:59:59 GMT+0800
        time.second():     59
        time.second(996):  Mon Nov 01 2021 23:59:30 GMT+0800
        time.second():     30
      hour
        time:          Mon Nov 01 2021 23:59:30 GMT+0800
        time.hour():   23
        time.hour(1):  Mon Nov 01 2021 01:59:30 GMT+0800
        time.hour():   1
      get/set
        current time:             Mon Nov 01 2021 23:59:59 GMT+0800
        time.get('year'):         2021
        time.get('month'):        10
        time.get('date'):         1
        time.get('day'):          1
        time.get('hour'):         23
        time.get('minute'):       59
        time.get('second'):       59
        time.get('millisecond'):  699
        time.set('year', 2022):      Tue Nov 01 2022 23:59:59 GMT+0800
        time.set('month', 0):        Sat Jan 01 2022 23:59:59 GMT+0800
        time.set('date', 13):        Thu Jan 13 2022 23:59:59 GMT+0800
        time.set('day', 1):          Mon Jan 10 2022 23:59:59 GMT+0800
        time.set('hour', 1):         Mon Jan 10 2022 01:59:59 GMT+0800
        time.set('minute', 3):       Mon Jan 10 2022 01:03:59 GMT+0800
        time.set('second', 5):       Mon Jan 10 2022 01:03:05 GMT+0800
        time.set('millisecond', 7):  Mon Jan 10 2022 01:03:05 GMT+0800
    

    1.3 日期操作(加、减、对齐、选择)

    第三个场景我们可能会需要对当前的时间对象进行加法、减法的操作,或是向某个时间单位的头尾进行对齐,以及多个时间单位选择最早/最晚的时间,可用的函数标签如下

    moment#add(val, unit)       // 在 unit 单位加上 val 值
    moment#subtract(val, unit)  // 在 unit 单位减去 val 值
    moment#startOf(unit)  // 向下取整到最近的 unit 单位
    moment#endOf(unit)    // 向上取整到最近的 unit 单位
    moment.max(...values)  // 取参数中最大(最晚)的时间
    moment.min(...values)  // 取参数中最小(最早)的时间
    
    • src/moment/3_operate.js
    const moment = require('moment')
    const { log, group } = require('../utils/group')
    
    group('moment.js operate', () => {
      const origin = moment('2019-11-01 23:59:59.699')
    
      let time = origin.clone()
      group('add', () => {
        log(`current time:            ${time}`)
        log(`time.add(365, 'days'):   ${time.add(365, 'days')}`)
        log(`reset time:              ${time.set('year', 2019)}`)
        log(`time.add(1, 'years'):    ${time.add(1, 'years')}`)
        log(`time.add(8, 'd'):        ${time.add(8, 'd')}`)
        log(`time.add({ days: 7 }):   ${time.add({ days: 7 })}`)
      })
    
      time = origin.clone().year(2020)
      group('subtract', () => {
        log(`current time:                ${time}`)
        log(`time.subtract(365, 'days'):  ${time.subtract(365, 'days')}`)
        log(`reset time:                  ${time.year(2020).date(1)}`)
        log(`time.subtract(1, 'years'):   ${time.subtract(1, 'years')}`)
      })
    
      group('startOf/endOf', () => {
        time = moment('2019-01-01 01:30:30.333')
        log(`time:                    ${time}`)
        log(`time.startOf('minute'):  ${time.clone().startOf('minute')}`)
        log(`time.startOf('hour'):    ${time.clone().startOf('hour')}`)
    
        log(`time:                  ${time}`)
        log(`time.endOf('minute'):  ${time.clone().endOf('minute')}`)
        log(`time.endOf('hour'):    ${time.clone().endOf('hour')}`)
      })
    
      group('max/min', () => {
        const laterOne = moment('2020-01-01 12')
        const earlyOne = moment('2020-01-01 05')
        log(`earlyOne:                                     ${earlyOne}`)
        log(`laterOne:                                     ${laterOne}`)
    
        log(`moment.max(earlyOne, laterOne):               ${moment.max(earlyOne, laterOne)}`)
        log(`moment.max(earlyOne, laterOne) === laterOne:  ${moment.max(earlyOne, laterOne) === laterOne}`)
    
        log(`moment.min(earlyOne, laterOne):               ${moment.min(earlyOne, laterOne)}`)
        log(`moment.min(earlyOne, laterOne) === earlyOne:  ${moment.min(earlyOne, laterOne) === earlyOne}`)
      })
    })
    
    • 输出
    moment.js operate
      add
        current time:            Fri Nov 01 2019 23:59:59 GMT+0800
        time.add(365, 'days'):   Sat Oct 31 2020 23:59:59 GMT+0800
        reset time:              Thu Oct 31 2019 23:59:59 GMT+0800
        time.add(1, 'years'):    Sat Oct 31 2020 23:59:59 GMT+0800
        time.add(8, 'd'):        Sun Nov 08 2020 23:59:59 GMT+0800
        time.add({ days: 7 }):   Sun Nov 15 2020 23:59:59 GMT+0800
      subtract
        current time:                Sun Nov 01 2020 23:59:59 GMT+0800
        time.subtract(365, 'days'):  Sat Nov 02 2019 23:59:59 GMT+0800
        reset time:                  Sun Nov 01 2020 23:59:59 GMT+0800
        time.subtract(1, 'years'):   Fri Nov 01 2019 23:59:59 GMT+0800
      startOf/endOf
        time:                    Tue Jan 01 2019 01:30:30 GMT+0800
        time.startOf('minute'):  Tue Jan 01 2019 01:30:00 GMT+0800
        time.startOf('hour'):    Tue Jan 01 2019 01:00:00 GMT+0800
        time:                  Tue Jan 01 2019 01:30:30 GMT+0800
        time.endOf('minute'):  Tue Jan 01 2019 01:30:59 GMT+0800
        time.endOf('hour'):    Tue Jan 01 2019 01:59:59 GMT+0800
      max/min
        earlyOne:                                     Wed Jan 01 2020 05:00:00 GMT+0800
        laterOne:                                     Wed Jan 01 2020 12:00:00 GMT+0800
        moment.max(earlyOne, laterOne):               Wed Jan 01 2020 12:00:00 GMT+0800
        moment.max(earlyOne, laterOne) === laterOne:  true
        moment.min(earlyOne, laterOne):               Wed Jan 01 2020 05:00:00 GMT+0800
        moment.min(earlyOne, laterOne) === earlyOne:  true
    

    1.4 查询(判断、比较)

    第四个场景是进行时间的判断、比较,给出函数标签

    moment#isBefore(other)  // 判断当前实例时间是否早于 other
    moment#isSame(other)    // 判断当前实例时间是否等于 other
    moment#isAfter(other)   // 判断当前实例时间是否晚于 other
    moment#isBetween(from, to)   // 判断当前实例时间是否介于 from 和 to 之间
    moment#isLeapYear()     // 判断是否为闰年
    
    • src/moment/4_query.js
    const moment = require('moment')
    const { log, group } = require('../utils/group')
    
    group('moment.js query', () => {
      const earlyOne = moment('2020-01-01 05')
      const laterOne = moment('2020-01-01 12')
      const middleOne = moment('2020-01-01 08')
    
      log(`earlyOne:   ${earlyOne}`)
      log(`laterOne:   ${laterOne}`)
      log(`middleOne:  ${middleOne}`)
    
      group('isBefore', () => {
        log(`earlyOne.isBefore(laterOne):  ${earlyOne.isBefore(laterOne)}`)
        log(`laterOne.isBefore(earlyOne):  ${laterOne.isBefore(earlyOne)}`)
        log(`earlyOne.isBefore(earlyOne):  ${earlyOne.isBefore(earlyOne)}`)
      })
    
      group('isSame', () => {
        log(`earlyOne.isSame(laterOne):  ${earlyOne.isSame(laterOne)}`)
        log(`laterOne.isSame(earlyOne):  ${laterOne.isSame(earlyOne)}`)
        log(`earlyOne.isSame(earlyOne):  ${earlyOne.isSame(earlyOne)}`)
      })
    
      group('isAfter', () => {
        log(`earlyOne.isAfter(laterOne):  ${earlyOne.isAfter(laterOne)}`)
        log(`laterOne.isAfter(earlyOne):  ${laterOne.isAfter(earlyOne)}`)
        log(`earlyOne.isAfter(earlyOne):  ${earlyOne.isAfter(earlyOne)}`)
      })
    
      group('isBetween', () => {
        log(`middleOne.isBetween(earlyOne, laterOne):  ${middleOne.isBetween(earlyOne, laterOne)}`)
        log(`middleOne.isBetween(laterOne, earlyOne):  ${middleOne.isBetween(laterOne, earlyOne)}`)
      })
    
      group('isLeapYear', () => {
        log(`moment('1600').isLeapYear():  ${moment('1600').isLeapYear()}`)
        log(`moment('1800').isLeapYear():  ${moment('1800').isLeapYear()}`)
        log(`moment('2000').isLeapYear():  ${moment('2000').isLeapYear()}`)
        log(`moment('2020').isLeapYear():  ${moment('2020').isLeapYear()}`)
      })
    })
    
    • 输出
    moment.js query
      earlyOne:   Wed Jan 01 2020 05:00:00 GMT+0800
      laterOne:   Wed Jan 01 2020 12:00:00 GMT+0800
      middleOne:  Wed Jan 01 2020 08:00:00 GMT+0800
      isBefore
        earlyOne.isBefore(laterOne):  true
        laterOne.isBefore(earlyOne):  false
        earlyOne.isBefore(earlyOne):  false
      isSame
        earlyOne.isSame(laterOne):  false
        laterOne.isSame(earlyOne):  false
        earlyOne.isSame(earlyOne):  true
      isAfter
        earlyOne.isAfter(laterOne):  false
        laterOne.isAfter(earlyOne):  true
        earlyOne.isAfter(earlyOne):  false
      isBetween
        middleOne.isBetween(earlyOne, laterOne):  true
        middleOne.isBetween(laterOne, earlyOne):  false
      isLeapYear
        moment('1600').isLeapYear():  true
        moment('1800').isLeapYear():  false
        moment('2000').isLeapYear():  true
        moment('2020').isLeapYear():  true
    

    1.5 格式化输出

    最后一个是时间的格式化输出,是我们可以直接透过口令(模版)来进行字符串格式化输出,而不再需要自己组合时间对象的属性

    moment#format(template)  // 根据模版(口令)进行格式化并返回字符串
    moment#from(other)  // 输出自 other 到当前实例的语义化时间间隔
    moment#diff(other)  // 比较与 other 相差的时间,返回时间戳
    moment#unix()       // 当前时间的 unix 时间戳(单位:秒)
    moment#valueOf()    // 当前时间的时间戳(单位:毫秒)
    
    • src/moment/5_format.js
    const moment = require('moment')
    const { log, group } = require('../utils/group')
    
    group('moment.js format', () => {
      let earlyTime = moment([2020, 1, 1])
      const origin = moment()
      let time = origin.clone()
    
      log(`earlyTime:  ${earlyTime}`)
      log(`time:       ${time}`)
    
      group('format', () => {
        log(`time.format():                       ${time.format()}`)
        log(`time.format('YYYY-MM-DD'):           ${time.format('YYYY-MM-DD')}`)
        log(`time.format('YYYY.MM.DD HH:mm:ss'):  ${time.format('YYYY.MM.DD HH:mm:ss')}`)
      })
    
      group('from', () => {
        log(`time.from(earlyTime):        ${time.from(earlyTime)}`)
        log(`time.from(earlyTime, true):  ${time.from(earlyTime, true)}`)
      })
    
      group('diff', () => {
        log(`time.subtract(earlyTime).valueOf():  ${time.subtract(earlyTime).valueOf()}`)
        time = origin.clone()
        log(`time.diff(earlyTime):                ${time.diff(earlyTime)}`)
        log(`typeof time.subtract(earlyTime):     ${typeof time.subtract(earlyTime)}`)
        log(`typeof time.diff(earlyTime):         ${typeof time.diff(earlyTime)}`)
      })
    
      group('unix/valueOf', () => {
        time = origin.clone()
        log(`time.subtract(earlyTime).unix():     ${time.subtract(earlyTime).unix()}`)
        time = origin.clone()
        log(`time.subtract(earlyTime).valueOf():  ${time.subtract(earlyTime).valueOf()}`)
      })
    })
    
    • 输出
    moment.js format
      earlyTime:  Sat Feb 01 2020 00:00:00 GMT+0800
      time:       Fri May 21 2021 14:37:10 GMT+0800
      format
        time.format():                       2021-05-21T14:37:10+08:00
        time.format('YYYY-MM-DD'):           2021-05-21
        time.format('YYYY.MM.DD HH:mm:ss'):  2021.05.21 14:37:10
      from
        time.from(earlyTime):        in a year
        time.from(earlyTime, true):  a year
      diff
        time.subtract(earlyTime).valueOf():  41092630034
        time.diff(earlyTime):                41092630034
        typeof time.subtract(earlyTime):     object
        typeof time.diff(earlyTime):         number
      unix/valueOf
        time.subtract(earlyTime).unix():     41092630
        time.subtract(earlyTime).valueOf():  41092630034
    ✨  Done in 0.19s.
    

    2. Day.js

    Day.js 的能力几乎与 Moment.js 一模一样,最主要的差别在于模块化方式和实现细节,下一个段落会进行单独说明。

    下面我们先来看看直接从 moment 复制过来的示例代码,你会发现根本就是 99.99% 相似

    2.1 创建时间日期对象

    • src/dayjs/1_parse.js
    const dayjs = require('dayjs')
    const customParseFormat = require('dayjs/plugin/customParseFormat')
    const { log, group } = require('../utils/group')
    
    group('day.js parse', () => {
      dayjs.extend(customParseFormat)
      group('dayjs', () => {
        log(`dayjs():                            ${dayjs().format()}`)
        log(`dayjs('2021-11-01'):                ${dayjs('2021-11-01').format()}`)
        log(`dayjs('2021-11-01 23:59:59'):       ${dayjs('2021-11-01 23:59:59').format()}`)
        log(`dayjs('20211101T235959'):           ${dayjs('20211101T235959').format()}`)
        log(`dayjs('01-11-2021', 'DD-MM-YYYY'):  ${dayjs('01-11-2021', 'DD-MM-YYYY').format()}`)
      })
    
      group('clone', () => {
        const m1 = dayjs()
        const m2 = dayjs(m1)
        const m3 = m2.clone()
        log(`m1:  ${m1.toString()}`)
        log(`m2:  ${m2.toString()}`)
        log(`m3:  ${m3.toString()}`)
        log(`m1 === m2:                        ${m1 === m2}`)
        log(`m1 === m3:                        ${m1 === m3}`)
        log(`m2 === m3:                        ${m2 === m3}`)
        log(`m1.toString() === m2.toString():  ${m1.toString() === m2.toString()}`)
        log(`m1.toString() === m3.toString():  ${m1.toString() === m3.toString()}`)
        log(`m2.toString() === m3.toString():  ${m2.toString() === m3.toString()}`)
      })
    })
    
    • 输出
    day.js parse
      dayjs
        dayjs():                            2021-05-21T15:44:40+08:00
        dayjs('2021-11-01'):                2021-11-01T00:00:00+08:00
        dayjs('2021-11-01 23:59:59'):       2021-11-01T23:59:59+08:00
        dayjs('20211101T235959'):           2021-11-01T23:59:59+08:00
        dayjs('01-11-2021', 'DD-MM-YYYY'):  2021-11-01T00:00:00+08:00
      clone
        m1:  Fri, 21 May 2021 07:44:40 GMT
        m2:  Fri, 21 May 2021 07:44:40 GMT
        m3:  Fri, 21 May 2021 07:44:40 GMT
        m1 === m2:                        false
        m1 === m3:                        false
        m2 === m3:                        false
        m1.toString() === m2.toString():  true
        m1.toString() === m3.toString():  true
        m2.toString() === m3.toString():  true
    

    2.1.1 差异

    我们可以看到差别在于从 moment 函数变成使用 dayjs 函数,同时不能使用数组来描述时间,这个倒是比较好解决

    同时对于格式化输出的能力,我们需要透过插件(Plugin)的方式来引入

    const customParseFormat = require('dayjs/plugin/customParseFormat')
    
    dayjs.extend(customParseFormat)
    

    2.2 获取/设置属性

    • src/dayjs/2_get_set.js
    const dayjs = require('dayjs')
    const { log, group } = require('../utils/group')
    
    group('day.js get/set', () => {
      const origin = dayjs('2021-11-01 23:59:59.699')
    
      let time = origin.clone()
    
      group('second', () => {
        log(`time:              ${time}`)
        log(`time.second():     ${time.second()}`)
        log(`time.second(996):  ${time.second(30)}`)
        log(`time.second():     ${time.second()}`)
      })
    
      group('hour', () => {
        log(`time:          ${time}`)
        log(`time.hour():   ${time.hour()}`)
        log(`time.hour(1):  ${time.hour(1)}`)
        log(`time.hour():   ${time.hour()}`)
      })
    
      time = origin.clone()
    
      group('get/set', () => {
        log(`current time:             ${time}`)
        log(`time.get('year'):         ${time.get('year')}`)
        log(`time.get('month'):        ${time.get('month')}`)
        log(`time.get('date'):         ${time.get('date')}`)
        log(`time.get('day'):          ${time.get('day')}`)
        log(`time.get('hour'):         ${time.get('hour')}`)
        log(`time.get('minute'):       ${time.get('minute')}`)
        log(`time.get('second'):       ${time.get('second')}`)
        log(`time.get('millisecond'):  ${time.get('millisecond')}`)
    
        log(`time.set('year', 2022):      ${time = time.set('year', 2022)}`)
        log(`time.set('month', 0):        ${time = time.set('month', 0)}`)
        log(`time.set('date', 13):        ${time = time.set('date', 13)}`)
        log(`time.set('day', 1):          ${time = time.set('day', 1)}`)
        log(`time.set('hour', 1):         ${time = time.set('hour', 1)}`)
        log(`time.set('minute', 3):       ${time = time.set('minute', 3)}`)
        log(`time.set('second', 5):       ${time = time.set('second', 5)}`)
        log(`time.set('millisecond', 7):  ${time = time.set('millisecond', 7)}`)
      })
    })
    
    • 输出
    day.js get/set
      second
        time:              Mon, 01 Nov 2021 15:59:59 GMT
        time.second():     59
        time.second(996):  Mon, 01 Nov 2021 15:59:30 GMT
        time.second():     59
      hour
        time:          Mon, 01 Nov 2021 15:59:59 GMT
        time.hour():   23
        time.hour(1):  Sun, 31 Oct 2021 17:59:59 GMT
        time.hour():   23
      get/set
        current time:             Mon, 01 Nov 2021 15:59:59 GMT
        time.get('year'):         2021
        time.get('month'):        10
        time.get('date'):         1
        time.get('day'):          1
        time.get('hour'):         23
        time.get('minute'):       59
        time.get('second'):       59
        time.get('millisecond'):  699
        time.set('year', 2022):      Tue, 01 Nov 2022 15:59:59 GMT
        time.set('month', 0):        Sat, 01 Jan 2022 15:59:59 GMT
        time.set('date', 13):        Thu, 13 Jan 2022 15:59:59 GMT
        time.set('day', 1):          Mon, 10 Jan 2022 15:59:59 GMT
        time.set('hour', 1):         Sun, 09 Jan 2022 17:59:59 GMT
        time.set('minute', 3):       Sun, 09 Jan 2022 17:03:59 GMT
        time.set('second', 5):       Sun, 09 Jan 2022 17:03:05 GMT
        time.set('millisecond', 7):  Sun, 09 Jan 2022 17:03:05 GMT
    

    2.2.1 差异

    get/set 操作方法则一模一样,不同的是在 dayjs 里面的时间对象是一个不可改变,任何操作都会返回一个新的对象,而通常这也是比较好的表现,这便是比较需要注意的

    2.3 日期操作(加、减、对齐、选择)

    • src/dayjs/3_operate.js
    const dayjs = require('dayjs')
    const { log, group } = require('../utils/group')
    const minMax = require('dayjs/plugin/minMax')
    
    dayjs.extend(minMax)
    
    group('day.js operate', () => {
      const origin = dayjs('2019-11-01 23:59:59.699')
    
      let time = origin.clone()
      group('add', () => {
        log(`current time:            ${time}`)
        log(`time.add(365, 'days'):   ${time.add(365, 'days')}`)
        log(`time.add(1, 'years'):    ${time.add(1, 'years')}`)
        log(`time.add(8, 'd'):        ${time.add(8, 'd')}`)
        log(`time.add({ days: 7 }):   ${time.add({ days: 7 })}`)
      })
    
      time = origin.clone().year(2020)
      group('subtract', () => {
        log(`current time:                ${time}`)
        log(`time.subtract(365, 'days'):  ${time.subtract(365, 'days')}`)
        log(`time.subtract(1, 'years'):   ${time.subtract(1, 'years')}`)
      })
    
      group('startOf/endOf', () => {
        time = dayjs('2019-01-01 01:30:30.333')
        log(`time:                    ${time}`)
        log(`time.startOf('minute'):  ${time.clone().startOf('minute')}`)
        log(`time.startOf('hour'):    ${time.clone().startOf('hour')}`)
    
        log(`time:                  ${time}`)
        log(`time.endOf('minute'):  ${time.clone().endOf('minute')}`)
        log(`time.endOf('hour'):    ${time.clone().endOf('hour')}`)
      })
    
      group('max/min', () => {
        const laterOne = dayjs('2020-01-01 12')
        const earlyOne = dayjs('2020-01-01 05')
        log(`earlyOne:                                    ${earlyOne}`)
        log(`laterOne:                                    ${laterOne}`)
    
        log(`dayjs.max(earlyOne, laterOne):               ${dayjs.max(earlyOne, laterOne)}`)
        log(`dayjs.max(earlyOne, laterOne) === laterOne:  ${dayjs.max(earlyOne, laterOne) === laterOne}`)
    
        log(`dayjs.min(earlyOne, laterOne):               ${dayjs.min(earlyOne, laterOne)}`)
        log(`dayjs.min(earlyOne, laterOne) === earlyOne:  ${dayjs.min(earlyOne, laterOne) === earlyOne}`)
      })
    
    })
    
    • 输出
    day.js operate
      add
        current time:            Fri, 01 Nov 2019 15:59:59 GMT
        time.add(365, 'days'):   Sat, 31 Oct 2020 15:59:59 GMT
        time.add(1, 'years'):    Sun, 01 Nov 2020 15:59:59 GMT
        time.add(8, 'd'):        Sat, 09 Nov 2019 15:59:59 GMT
        time.add({ days: 7 }):   Invalid Date
      subtract
        current time:                Sun, 01 Nov 2020 15:59:59 GMT
        time.subtract(365, 'days'):  Sat, 02 Nov 2019 15:59:59 GMT
        time.subtract(1, 'years'):   Fri, 01 Nov 2019 15:59:59 GMT
      startOf/endOf
        time:                    Mon, 31 Dec 2018 17:30:30 GMT
        time.startOf('minute'):  Mon, 31 Dec 2018 17:30:00 GMT
        time.startOf('hour'):    Mon, 31 Dec 2018 17:00:00 GMT
        time:                  Mon, 31 Dec 2018 17:30:30 GMT
        time.endOf('minute'):  Mon, 31 Dec 2018 17:30:59 GMT
        time.endOf('hour'):    Mon, 31 Dec 2018 17:59:59 GMT
      max/min
        earlyOne:                                    Tue, 31 Dec 2019 21:00:00 GMT
        laterOne:                                    Wed, 01 Jan 2020 04:00:00 GMT
        dayjs.max(earlyOne, laterOne):               Wed, 01 Jan 2020 04:00:00 GMT
        dayjs.max(earlyOne, laterOne) === laterOne:  true
        dayjs.min(earlyOne, laterOne):               Tue, 31 Dec 2019 21:00:00 GMT
        dayjs.min(earlyOne, laterOne) === earlyOne:  true
    

    2.3.1 差异

    第三个对于时间类型的操作也是近乎一致;不同的是比大小的 min/max 方法一样要透过插件的形式来引入

    const minMax = require('dayjs/plugin/minMax')
    
    dayjs.extend(minMax)
    

    2.4 查询(判断、比较)

    • src/dayjs/4_query.js
    const dayjs = require('dayjs')
    const { log, group } = require('../utils/group')
    const isBetween = require('dayjs/plugin/isBetween')
    const isLeapYear = require('dayjs/plugin/isLeapYear')
    
    dayjs.extend(isBetween)
    dayjs.extend(isLeapYear)
    
    group('day.js query', () => {
      const earlyOne = dayjs('2020-01-01 05')
      const laterOne = dayjs('2020-01-01 12')
      const middleOne = dayjs('2020-01-01 08')
    
      log(`earlyOne:   ${earlyOne}`)
      log(`laterOne:   ${laterOne}`)
      log(`middleOne:  ${middleOne}`)
    
      group('isBefore', () => {
        log(`earlyOne.isBefore(laterOne):  ${earlyOne.isBefore(laterOne)}`)
        log(`laterOne.isBefore(earlyOne):  ${laterOne.isBefore(earlyOne)}`)
        log(`earlyOne.isBefore(earlyOne):  ${earlyOne.isBefore(earlyOne)}`)
      })
    
      group('isSame', () => {
        log(`earlyOne.isSame(laterOne):  ${earlyOne.isSame(laterOne)}`)
        log(`laterOne.isSame(earlyOne):  ${laterOne.isSame(earlyOne)}`)
        log(`earlyOne.isSame(earlyOne):  ${earlyOne.isSame(earlyOne)}`)
      })
    
      group('isAfter', () => {
        log(`earlyOne.isAfter(laterOne):  ${earlyOne.isAfter(laterOne)}`)
        log(`laterOne.isAfter(earlyOne):  ${laterOne.isAfter(earlyOne)}`)
        log(`earlyOne.isAfter(earlyOne):  ${earlyOne.isAfter(earlyOne)}`)
      })
    
      group('isBetween', () => {
        log(`middleOne.isBetween(earlyOne, laterOne):  ${middleOne.isBetween(earlyOne, laterOne)}`)
        log(`middleOne.isBetween(laterOne, earlyOne):  ${middleOne.isBetween(laterOne, earlyOne)}`)
      })
    
      group('isLeapYear', () => {
        log(`moment('1600').isLeapYear():  ${dayjs('1600').isLeapYear()}`)
        log(`moment('1800').isLeapYear():  ${dayjs('1800').isLeapYear()}`)
        log(`moment('2000').isLeapYear():  ${dayjs('2000').isLeapYear()}`)
        log(`moment('2020').isLeapYear():  ${dayjs('2020').isLeapYear()}`)
      })
    })
    
    • 输出
    day.js query
      earlyOne:   Tue, 31 Dec 2019 21:00:00 GMT
      laterOne:   Wed, 01 Jan 2020 04:00:00 GMT
      middleOne:  Wed, 01 Jan 2020 00:00:00 GMT
      isBefore
        earlyOne.isBefore(laterOne):  true
        laterOne.isBefore(earlyOne):  false
        earlyOne.isBefore(earlyOne):  false
      isSame
        earlyOne.isSame(laterOne):  false
        laterOne.isSame(earlyOne):  false
        earlyOne.isSame(earlyOne):  true
      isAfter
        earlyOne.isAfter(laterOne):  false
        laterOne.isAfter(earlyOne):  true
        earlyOne.isAfter(earlyOne):  false
      isBetween
        middleOne.isBetween(earlyOne, laterOne):  true
        middleOne.isBetween(laterOne, earlyOne):  true
      isLeapYear
        dayjs('1600').isLeapYear():  true
        dayjs('1800').isLeapYear():  false
        dayjs('2000').isLeapYear():  true
        dayjs('2020').isLeapYear():  true
    

    2.4.1 差异

    同样的 isBetween, isLeapYear 需要使用插件引入

    const isBetween = require('dayjs/plugin/isBetween')
    const isLeapYear = require('dayjs/plugin/isLeapYear')
    
    dayjs.extend(isBetween)
    dayjs.extend(isLeapYear)
    

    2.5 格式化输出

    • src/dayjs/5_format.js
    const dayjs = require('dayjs')
    const { log, group } = require('../utils/group')
    const relativeTime = require('dayjs/plugin/relativeTime')
    
    dayjs.extend(relativeTime)
    
    group('day.js format', () => {
      let earlyTime = dayjs([2020, 1, 1])
      const origin = dayjs()
      let time = origin.clone()
    
      log(`earlyTime:  ${earlyTime}`)
      log(`time:       ${time}`)
    
      group('format', () => {
        log(`time.format():                       ${time.format()}`)
        log(`time.format('YYYY-MM-DD'):           ${time.format('YYYY-MM-DD')}`)
        log(`time.format('YYYY.MM.DD HH:mm:ss'):  ${time.format('YYYY.MM.DD HH:mm:ss')}`)
      })
    
      group('from', () => {
        log(`time.from(earlyTime):        ${time.from(earlyTime)}`)
        log(`time.from(earlyTime, true):  ${time.from(earlyTime, true)}`)
      })
    
      group('diff', () => {
        log(`time.subtract(earlyTime).valueOf():  ${time.subtract(earlyTime).valueOf()}`)
        time = origin.clone()
        log(`time.diff(earlyTime):                ${time.diff(earlyTime)}`)
        log(`typeof time.subtract(earlyTime):     ${typeof time.subtract(earlyTime)}`)
        log(`typeof time.diff(earlyTime):         ${typeof time.diff(earlyTime)}`)
      })
    
      group('unix/valueOf', () => {
        time = origin.clone()
        log(`time.subtract(earlyTime).unix():     ${time.subtract(earlyTime).unix()}`)
        time = origin.clone()
        log(`time.subtract(earlyTime).valueOf():  ${time.subtract(earlyTime).valueOf()}`)
      })
    })
    
    • 输出
    day.js format
      earlyTime:  Tue, 31 Dec 2019 16:00:00 GMT
      time:       Fri, 21 May 2021 07:44:40 GMT
      format
        time.format():                       2021-05-21T15:44:40+08:00
        time.format('YYYY-MM-DD'):           2021-05-21
        time.format('YYYY.MM.DD HH:mm:ss'):  2021.05.21 15:44:40
      from
        time.from(earlyTime):        in a year
        time.from(earlyTime, true):  a year
      diff
        time.subtract(earlyTime).valueOf():  43775080504
        time.diff(earlyTime):                43775080504
        typeof time.subtract(earlyTime):     object
        typeof time.diff(earlyTime):         number
      unix/valueOf
        time.subtract(earlyTime).unix():     43775080
        time.subtract(earlyTime).valueOf():  43775080504
    ✨  Done in 0.24s.
    

    2.5.1 差异

    from 方法或其他相对时间的相关方法则需要使用 relativeTime 引入

    const relativeTime = require('dayjs/plugin/relativeTime')
    
    dayjs.extend(relativeTime)
    

    3. Day.js 相较于 Moment.js 的好处

    接下来比较重要的是来说明一下为什么说用 Day.js 比 moment.js 好,首先我们先来说说 moment.js

    moment.js 算是比较早期,同时经过多次版本的更新,不断有新功能被添加到整个 moment 对象上,当所有功能、特性都聚集在这一个 moment 对象的时候就显得异常臃肿,同时也代表着所有代码都关联在一起。而且很重要的一点是 moment.js 对于原生 Date 对象存在侵入性的修改,与 day.js 全部都迁移到自己的 dayjs 对象内部不同。

    3.1 Moment.js 的问题

    也就是说当我们使用 moment.js 的时候会存在以下问题:

    1. 类库中代码非常 臃肿,携带非常多没有被使用到的多余代码
    2. 多余的特性、检查,使得因为一些没有被使用的特性,却总是需要在运行时花费额外开销来处理特性分类的问题
    3. moment.js 自己的作者也声明由于 moment 对象已经变得过于臃肿,所以已经停止进行新版本新特性的更新,进入 维护期;同时作者也推荐使用其他更新的库如 Day.js,或是未来的新标准 Intl 对象的使用

    3.2 Day.js 的好处

    使用 Day.js 则会为我们带来以下好处

    1. Day.js 的 API 几乎与 Moment.js 有 9 成以上相似,所以在进行迁移的时候的学习成本极低

    2. Day.js 将不同的特性分成各个插件(Plugin),使用者可以根据需要主动引入并对全局对象进行扩展

      const xxx = require('dayjs/plugin/xxx')
      
      dayjs.extend(xxx)
      

      这对于我们来说不仅是代码上的鲁棒性更高,同时减少 dayjs 对象的复杂度和大小。同时这对于我们的项目进行打包的时候也有助于打包工具的 tree-shaking 可以显著的降低无用代码和无用特性的引入。

    结语

    本篇提供了两个日期时间库使用时的大量示例,供大家参考和查阅,更详细更精确的 API 使用推荐大家去看类库的官方文档边查边用更对味。

    其他资源

    参考连接

    TitleLink
    moment.jshttp://momentjs.cn/
    day.jshttps://dayjs.fenxianglu.cn/
    时间标准基础知识UTC和ISO8601https://www.cnblogs.com/doit8791/p/10398997.html
    Moment.js官方推荐使用其它时间处理库代替https://www.w3cschool.cn/article/b0266c23d158f0.html

    阅读笔记参考

    https://github.com/superfreeeee/Blog-code/tree/main/front_end/others/moment-dayjs

    展开全文
  • 如何使用Webpack优化Moment.js 当您在代码中编写var moment = require('moment')并使用webpack打包时,捆绑文件的大小会变得很重,因为它包含所有区域设置文件。 为了优化大小,提供了两个webpack插件: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,519
精华内容 15,007
关键字:

Moment.js