MomentJS - 快速指南

MomentJS - 概述

MomentJS 是一个 JavaScript 库，它可以帮助您以非常简单的方式解析、验证、操作和显示 JavaScript 中的日期/时间。本章将概述 MomentJS 并详细讨论其功能。

Moment JS 允许根据本地化和人类可读的格式显示日期。您可以使用脚本方法在浏览器中使用 MomentJS。它也适用于 Node.js，可以使用 npm 安装。

在 MomentJS 中，您可以找到许多易于使用的方法来添加、减去、验证日期、获取最大、最小日期等。这是一个开源项目，您可以轻松地为库做出贡献并以插件的形式添加功能，并在 GitHub 和 Node.js 中提供它。

功能

让我们详细了解 MomentJS 提供的所有重要功能 −

解析

解析允许您以所需的格式解析日期。日期解析可用于字符串、对象和数组。它允许您使用 moment.clone 克隆 moment。有可用的方法可以以 UTC 格式提供日期输出。

日期验证

使用 MomentJS 进行日期验证非常简单。您可以使用方法 isValid() 检查日期是否有效。MomentJS 还提供了许多解析标志，可用于检查日期验证。

操作

有多种方法可以操作 moment 对象上的日期和时间。add、subtract、startoftime、endoftime、local、utc、utcoffset 等是可用的方法，它们提供了 MomentJS 中日期/时间所需的详细信息。

获取/设置

获取/设置允许读取和设置日期中的单位。它允许更改以及读取小时、分钟、秒、毫秒、月份日期、星期几、一年中的天数、一年中的周数、月份、年份、季度、周年、一年中的周数、获取/设置、最大值、最小值等。获取/设置是 MomentJS 中非常有用的功能。

显示

显示提供以不同方式显示日期的格式。有可用的方法可以告诉从给定时刻开始的时间、从当前时刻开始的时间、两个时刻之间的差异等。它允许以 JSON 格式、数组、对象、字符串等显示日期。

日期查询

日期查询具有易于使用的方法，可以告诉日期是大于还是小于输入、在给定日期之间、是闰年、是时刻、是日期等。它在日期验证中非常有用。

持续时间

持续时间是 MomentJS 中的重要功能之一。它基本上处理给定单位的时间长度。可用的 humanize 方法以人类可读的格式显示日期。

国际化

国际化是 MomentJS 中的另一个重要功能。您可以根据语言环境显示日期和时间。如果需要，可以将语言环境应用于特定时刻。您将从 MomentJS 主页获得一个包含所有语言环境的压缩文件。如果您要处理特定语言环境，也可以只添加该语言环境文件并使用它。月份、星期和日期的名称显示在指定的语言环境中。

自定义

MomentJS 允许自定义创建的语言环境。您可以根据需要为定义的语言环境自定义月份名称、月份缩写、星期名称、星期缩写、长日期格式和日历格式。

实用程序

实用程序附带两种方法:标准化单位和无效。它们与 moment 一起使用，可帮助我们根据需要更改或自定义输出。它还允许在 moment 对象上设置我们自己的自定义验证。

插件

插件是 MomentJS 的附加功能。日历、日期格式、解析、日期范围、精确范围等添加了许多插件。您可以添加自己的插件并通过 Node.js 和 GitHub 提供它们。

MomentJS - 环境设置

在本章中，您将详细了解如何在本地计算机上设置 MomentJS 的工作环境。在开始使用 MomentJS 之前，您需要访问该库。您可以通过以下任何一种方法访问其文件 −

方法 1:在浏览器中使用 MomentJS 文件

在此方法中，我们将需要来自其官方网站的 MomentJS 文件，并将直接在浏览器中使用它。

步骤 1

首先，请访问 MomentJS 的官方网站 https://momentjs.com您将找到如下所示的主页 −

请注意，有一个可用的下载选项，可为您提供最新的 MomentJS 文件。请注意，该文件在压缩和未压缩两种情况下均可用。

步骤 2

现在，在 script 标签内包含 moment.js，然后开始使用 MomentJS。为此，您可以使用下面给出的代码 −

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

为了更好地理解，这里给出了一个工作示例及其输出 −

Example

<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

输出

如上图所示，还可以使用 moment-locale 文件来处理不同的语言环境。现在，将文件添加到脚本标签中，如下所示，并使用您选择的不同语言环境。为此，您可以使用下面给出的代码 −

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

这里给出了 moment-locale 及其输出的一个工作示例，以便更好地理解 −

<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

输出

方法 2:使用 Node.js

如果您选择此方法，请确保您的系统上安装了 Node.js 和 npm。您可以使用以下命令安装 MomentJS −

npm install moment

成功安装 MomentJS 后，您可以观察到以下输出 −

现在，要测试 MomentJS 是否与 Node.js 配合良好，请创建文件 test.js 并向其中添加以下代码 −

var moment = require('moment');
var a = moment().toString();
console.log(a);

现在，在命令提示符中，运行命令 node test.js，如下面的屏幕截图所示 −

请注意，此命令显示 moment().toString() 的输出。

方法 3:使用 Bower

Bower 是获取 MomentJS 所需文件的另一种方法。您可以使用以下命令使用 Bower 安装 MomentJS −

bower install --save moment

下面的屏幕截图显示了使用 Bower 安装 MomentJS −

这些是从 Bower 加载的用于安装 MomentJS 的文件。下图显示了已安装的 moment 和 locale 文件−

MomentJS - 简介

在本章中，我们将讨论如何使用 RequireJS 的 MomentJS 以及 MomentJS 和 TypeScript 进行操作。

MomentJS 和 RequireJS

为了理解使用 RequireJS 的 MomentJS 的工作原理，让我们分析一个使用 MomentJS 和 RequireJS 的工作示例。对应应用的文件夹结构如下图所示 −

您可以从 RequireJS 官方网站获取 require.js 文件 − https://requirejs.org/docs/download.html. 观察以下代码以便更好地理解 −

Example project.html

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS and MomentJS</title>
      <!-- data-main attribute tells require.js to load
         scripts/main.js after require.js loads. -->
      <script data-main="scripts/main" src="scripts/require.js"></script>
   </head>
   <body>
      <h1>RequireJS and MomentJS</h1>
      <div id="datedisplay" style="font-size:25px;"></div>
   </body>
</html>

main.js

require.config({
   paths:{
      'momentlocale':'libs/momentlocale',
   },
});
require(['momentlocale'], function (moment) {
   moment.locale('fr');
   var a = moment().format("LLLL");
   document.getElementById("datedisplay").innerHTML = a;
});

请注意，Moment.js 和 momentlocale.js 位于文件夹 libs 中。

以下是您将在浏览器中看到的 project.html 的输出 −

MomentJS 和 TypeScript

用于构建 MomentJS 和 Typescript 项目的代码如下所示 −

package.json

{
   "name": "momenttypescript",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "browserify": "^16.2.0",
      "gulp": "^3.9.1",
      "gulp-connect": "^5.5.0",
      "gulp-typescript": "^4.0.2",
      "moment": "^2.22.1",
      "tsify": "^4.0.0",
      "typescript": "^2.8.3",
      "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

请注意，package,json 中提供的依赖项需要使用 npm install 安装。

main.ts

import * as moment from 'moment';
let now = moment().format('LLLL');
document.getElementById("datedisplay").innerHTML = now;

您需要使用 Gulp 将文件从 typescript 构建为 JavaScript，即从 main.ts 构建为 main.js。以下代码显示用于构建文件的 gulpfile.js。请注意，我们使用了 gulp-connect 包，该包打开本地服务器以显示输出。

gulpfile.js

var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var tsify = require("tsify");
var source = require("vinyl-source-stream");
gulp.task("build", function (cb) {
   runSequence("browserify", "minify", cb);
});
gulp.task("startserver", ["browserify", "connect"]);
gulp.task("browserify", function () {
var b = browserify({
   insertGlobals: true,
   debug: false
}) .add("src/main.ts") .plugin(tsify, { typescript: require("typescript") });
return b
   .bundle()
   .pipe(source("main.js"))
   .pipe(gulp.dest("build/"));
});
gulp.task("connect", function () {
   connect.server({
      root: ".",
      // port: '80',
      livereload: true
   });
});

这是运行上述代码时观察到的输出 −

您可以看到文件夹结构，格式如下 −

index.html 的代码如下所示 −

<html>
   <head></head>
   <body>
      <h1>MomentJS and typescript</h1>
      <div id="datedisplay" style="font-size:30px;"></div>
      <script src="build/main.js"></script>
   </body>
</html>

现在，如果您打开 http://localhost:8080/，您将看到如下所示的输出 −

MomentJS - 解析日期和时间

MomentJS 有许多易于使用的方法，可帮助解析日期和时间。它可以解析对象、字符串、数组、JavaScript 原生日期对象等形式的日期。本章将详细讨论它们。

解析日期

调用 moment() 时，MomentJS 会将包装器对象作为输出。在浏览器中控制台输出时，您可以观察到以下内容。

MomentJS 提供了各种方法来解析日期，如下所示 −

Sr.No.	方法和语法
1	Now moment()
2	String moment(string)
3	Object moment(object)
4	Date moment(Date)
5	Array moment(Array[])
6	Unix Timestamp moment(number)
7	Moment Clone moment(Moment)
8	UTC moment.utc()
9	parseZone moment.parseZone()
10	Creation Data moment().creationData();
11	Defaults var m = moment({hour: 3, minute: 40, seconds: 10});

MomentJS - 日期验证

MomentJS 以简单的方式处理日期验证。您无需编写大量代码来验证日期。isValid() 是 moment 上可用的方法，用于判断日期是否有效。MomentJS 还提供了许多解析标志，可用于检查日期验证。

解析标志

如果给定的日期被视为无效，MomentJS 会提供以下解析标志 −

overflow − 当给定的月份为 13 号、日期为一年中的 367 号或一个月中的 32 号、非闰年的 2 月为 29 号等时，就会发生这种情况。Overflow 包含与 invalidAt 匹配的无效单位的索引。请注意，-1 表示无溢出。

invalidMonth − 显示无效的月份名称。它将给出无效的月份字符串或 null。

Empty − 当给出的输入不是日期时。它会给出一个布尔值。

nullInput − 一个 null 输入，如 moment(null);它返回一个布尔值。

invalidFormat − 当给出的格式为空时，例如 moment('2018-04-25', [])。它返回布尔值。

userInvalidated − 明确创建为无效的日期，例如 moment.invalid()。它返回布尔值。

meridiem − 表示解析的子午线 (AM/PM)(如果有)。它返回字符串。

parsedDateParts − 它返回解析的日期部分数组，例如 parsedDateParts[0] 作为年份、parsedDateParts[1] 作为月份和 parsedDateParts[2] 作为日期。如果没有部分存在，但 meridiem 有值，则日期无效。它返回一个数组。

请考虑以下示例以了解日期验证 −

var a = moment("2018-18-10T10:20:25");
a.isValid();
a.invalidAt();

输出

invalidAt 的输出为 1 ，指向月份，因为月份值大于 12 并且溢出。如果发生溢出，invalidAt 将给出如下表所示的输出 −

0	years
1	months
2	days
3	hours
4	minutes
5	seconds
6	milliseconds

如果给定日期内有多个溢出，则它将是第一个溢出索引的输出。

MomentJS - Getter/Setter

MomentJS 有许多方法来获取/设置日期输入。Get 允许我们读取所需的输入单元，而 set 允许修改输入单元。本章详细讨论了 moment 上使用的 get/set 方法。

下表显示了可用的 get/set 方法 −

方法	语法
Millisecond	moment().millisecond(Number) moment().millisecond(); moment().milliseconds(Number); moment().milliseconds();
Second	moment().second(Number); moment().second(); moment().seconds(Number); moment().seconds();
Minute	moment().minute(Number); moment().minute(); moment().minutes(Number); moment().minutes();
Hour	moment().date(Number); moment().date(); moment().dates(Number); moment().dates();
Day of week	moment().day(Number\|String); moment().day(); moment().days(Number\|String); moment().days();
Date of Month	moment().date(Number); moment().date(); moment().dates(Number); moment().dates();
Day of year	moment().dayOfYear(Number); moment().dayOfYear();
Week of year	moment().week(Number); moment().week(); moment().weeks(Number); moment().weeks();
Week of year (ISO)	moment().isoWeek(Number); moment().isoWeek(); moment().isoWeeks(Number); moment().isoWeeks();
Month	moment().month(Number\|String); moment().month();
Quarter	moment().quarter(); moment().quarter(Number); moment().quarters(); moment().quarters(Number);
Year	moment().year(Number); moment().year();
Week year	moment().weekYear(Number); moment().weekYear();
Weeks in year	moment().weeksInYear();
Get	moment().get('year'); moment().get('month'); moment().get('date'); moment().get('hour'); moment().get('minute'); moment().get('second'); moment().get('millisecond');
Set	moment().set(String, Int); moment().set(Object(String, Int));
Maximum	moment.max(Moment[,Moment...]); moment.max(Moment[]);
Minimum	moment.min(Moment[,Moment...]); moment.min(Moment[]);

MomentJS - 操作日期和时间

MomentJS提供了各种方法来操作 moment 对象上的日期和时间。本章详细介绍了所有这些方法。

操作日期和时间的方法

下表显示了 MomentJS 中可用的方法，这些方法可帮助根据需要操作日期和时间 −

Sr.No.	方法和语法
1	Add moment.add()
2	Subtract moment.subtract()
3	Start of Time moment.startof()
4	End of Time moment.endof()
5	Local moment.local()
6	UTC moment.utc()
7	UTC offset moment.utcOffset()

MomentJS - 格式化日期和时间

MomentJS 提供以不同方式显示日期的格式。有可用的方法可以显示从给定时刻开始的时间、从当前时刻开始的时间、两个时刻之间的差异等。它可以以 JSON 格式、数组、对象、字符串等显示日期。

格式化日期和时间的方法

下表显示了可用的方法列表，这些方法可帮助根据需要显示/格式化日期。

方法	语法
Format	moment().format(); moment().format(String);
Time from now	moment().fromNow(); moment().fromNow(Boolean);
Time from X	moment().from (Moment\|String\|Number\|Date\|Array);
Time to now	moment().toNow(); moment().toNow(Boolean);
Time to X	moment().to(Moment\|String\| Number\|Date\|Array); moment().to(Moment\|String\| Number\|Date\|Array, Boolean);
Calendar Time	moment().calendar(); moment().calendar(referenceTime); moment().calendar(referenceTime, formats);
Difference	moment().diff(Moment\|String\| Number\|Date\|Array); moment().diff(Moment\|String\| Number\|Date\|Array, String); moment().diff(Moment\|String\| Number\|Date\|Array, String, Boolean);
Unix Timestamp(milliseconds)	moment().valueOf(); +moment();
Unix Timestamp(seconds)	moment().unix();
Days in Month	moment().daysInMonth();
As JavaScript Date	moment().toDate();
As Array	moment().toArray();
As JSON	moment().toJSON();
As ISO 8601 String	moment().toISOString(); moment().toISOString(keepOffset);
As Object	moment().toObject();
As String	moment().toString();
Inspect	moment().inspect();

MomentJS - 日期查询

MomentJS 提供了查询闰年日期/时间、日期比较、日期验证等的方法。本章将详细讨论这些方法。

MomentJS 中查询日期的方法

下表显示了 MomentJS 中可用的方法及其查询日期的语法 −

方法	语法
Is Before	moment().isBefore(Moment\|String\|Number\|Date\|Array); moment().isBefore(Moment\|String\|Number\|Date\|Array, String);
Is Same	moment().isSame(Moment\|String\|Number\|Date\|Array); moment().isSame(Moment\|String\|Number\|Date\|Array, String);
Is After	moment().isAfter(Moment\|String\|Number\|Date\|Array); moment().isAfter(Moment\|String\|Number\|Date\|Array, String);
Is Same or Before	moment().isSameOrBefore(Moment\|String\|Number\|Date\|Array); moment().isSameOrBefore(Moment\|String\|Number\|Date\|Array, String);
Is Same or After	moment().isSameOrAfter(Moment\|String\|Number\|Date\|Array); moment().isSameOrAfter(Moment\|String\|Number\|Date\|Array, String);
Is Between	moment().isBetween(moment-like, moment-like); moment().isBetween(moment-like, moment-like, String);
Is Daylight Saving Time	moment().isDST();
Is Leap Year	moment().isLeapYear();
Is a Moment	moment.isMoment(obj);
Is a Date	moment.isDate(obj);

MomentJS - 国际化

国际化是 MomentJS 中的重要功能之一。您可以根据本地化(即基于国家/地区)显示日期和时间。如果需要，可以将语言环境应用于特定时刻。

本章详细讨论了如何全局、本地应用语言环境、使用 Node.js 在浏览器中使用语言环境、获取所需语言环境中的单位(月份、工作日等)等。

Sr.No.	语言环境和描述
1	全局语言环境我们可以全局分配语言环境，所有日期/时间详细信息将在分配的语言环境中可用。
2	本地更改语言环境我们需要在本地应用语言环境，以防我们需要在应用程序中处理许多语言环境。
3	在浏览器中使用语言环境我们可以开始通过在脚本标记中包含语言环境文件来处理语言环境。
4	使用 Node.js 的语言环境如果您碰巧使用 Node.js，那么当您执行 npm install moment 时，您将已经拥有语言环境文件。
5	momentjs_Listing 当前语言环境的日期/时间详细信息您可以设置语言环境并检查月份、工作日等详细信息。
6	检查当前语言环境我们可以使用 moment.locale() 检查当前语言环境。
7	访问语言环境特定功能这里将看到当前加载的语言环境上可用的方法和属性。

MomentJS - 自定义

MomentJS 允许为创建的语言环境添加自定义。本章将详细讨论这些自定义。

以下列表显示了本地化中可能的自定义 −

Sr.No.	本地化 &描述
1	月份名称您可以将月份名称添加到语言环境自定义中。
2	月份缩写此方法有助于自定义月份缩写。
3	星期名称此方法有助于根据语言环境。
4	星期缩写此方法有助于根据语言环境设置自定义星期缩写。
5	最小星期缩写此方法有助于根据语言环境设置自定义最小星期缩写。
6	长日期格式此方法有助于根据语言环境自定义 longdateformat。
7	相对时间此方法有助于获取相对时间。
8	AM/PM 此方法有助于根据语言环境自定义子时区。
9	AM/PM 解析您可以使用以下方法解析 AM/PM此方法。
10	日历这有助于为区域设置自定义日历对象。
11	序数日期的序数显示可以根据区域设置进行更改。
12	相对时间阈值这与 duration.humanize 一起使用，其中持续时间的长度显示为几秒前、一分钟前、一小时前等等

MomentJS - 持续时间

MomentJS 提供了一项名为持续时间的重要功能，该功能可处理给定单位的时间长度。在本章中，您将详细了解这一点。

持续时间可用的方法

下表显示了可用于不同单位的持续时间的方法，可与 moment 持续时间 − 一起使用

方法	语法
Creating	moment.duration(Number, String); moment.duration(Number); moment.duration(Object); moment.duration(String);
Clone	moment.duration().clone();
Humanize	moment.duration().humanize();
Milliseconds	moment.duration().milliseconds(); moment.duration().asMilliseconds();
Seconds	moment.duration().seconds(); moment.duration().asSeconds();
Minutes	moment.duration().minutes(); moment.duration().asMinutes();
Hours	moment.duration().hours(); moment.duration().asHours();
Days	moment.duration().days(); moment.duration().asDays();
Weeks	moment.duration().weeks(); moment.duration().asWeeks();
Months	moment.duration().months(); moment.duration().asMonths();
Years	moment.duration().years(); moment.duration().asYears();
Add Time	moment.duration().add(Number, String); moment.duration().add(Number); moment.duration().add(Duration); moment.duration().add(Object);
Subtract Time	moment.duration().subtract(Number, String); moment.duration().subtract(Number); moment.duration().subtract(Duration); moment.duration().subtract(Object);
Using Duration with Diff	var duration = moment.duration(x.diff(y))
As Unit of Time	moment.duration().as(String);
Get Unit of Time	duration.get('hours'); duration.get('minutes'); duration.get('seconds'); duration.get('milliseconds');
As JSON	moment.duration().toJSON();
Is a Duration	moment.isDuration(obj);
As ISO 8601 String	moment.duration().toISOString();
Locale	moment.duration().locale(); moment.duration().locale(String);

MomentJS - 实用程序

在 MomentJS 中，您可以根据需要使用规范化单位和无效方法更改或自定义输出。您还可以在 moment 对象上设置自己的自定义验证。

查看下表了解更多信息 −

Sr.No.	方法和语法
1	normalizeUnits moment.normalizeUnits(String);
2	Invalid moment.invalid(Object);

MomentJS - 插件

插件是 MomentJS 上添加的扩展功能。MomentJS 是一个开源项目，MomentJS 中有许多插件，这些插件由其用户贡献，可通过 Node.js 和 GitHub 获取。

本章讨论 MomentJS 中可用的一些日历插件和日期格式插件。

日历插件

本节讨论两种类型的日历插件:ISO 日历和波斯日历。

ISO 日历

您可以使用以下命令通过 Node.js 安装它 −

npm install moment-isocalendar

您可以从 GitHub 获取 moment-isocalendar.js − https://github.com/fusionbox/moment-isocalendar 使用 isocalendar 和 MomentJS − 观察以下工作示例

示例

var m = moment().isocalendar();

输出

示例

var m = moment.fromIsocalendar([2018, 51, 10, 670]).format('LLLL');

输出

波斯日历

您可以使用以下命令通过 Node.js 安装它 −

npm install moment-jalaali

您可以从 GitHub 获取 moment-taiwan.js − https://github.com/bradwoo8621/moment-taiwan 使用 isocalendar 和 MomentJS − 观察以下工作示例

示例

var m = moment('190/01/01', 'tYY/MM/DD');
var c = m.twYear();

输出

日期格式插件

本节讨论以下类型的日期格式插件 −

Java dateformat 解析器
短日期格式化程序
解析日期格式
持续时间格式
日期范围
精确范围

Java DateFormat 解析器

您可以使用以下命令通过 Node.js 安装它 −

您可以从 GitHub 获取 moment-jdateformatparser.js − https://github.com/MadMG/moment-jdateformatparser 观察以下 moment-jdateformatparser 和 MomentJS 的工作示例 −

示例

var m = moment().formatWithJDF("dd.MM.yyyy");

输出

短日期格式化程序

shortdateformat 的 JavaScript 文件可从 GitHub 获取 −

https://github.com/researchgate/moment-shortformat

语法

moment().short();

显示内容如下表所示 −

From moment	From moment().short()
0 to 59 seconds	0 to 59 s
1 to 59 minutes	1 to 59 m
1 to 23 hours	1h to 23h
1 to 6 days	1d to 6d
>= 7 days and same year	Display will be like such as feb 3, mar 6
>= 7 days and diff year	Display will be like such as feb 3, 2018, mar 6, 2018

您可以从上面给出的 GitHub 链接获取 momentshort 脚本。

示例

var a = moment().subtract(8, 'hours').short();
var b = moment().add(1, 'hour').short(true);

输出

如果要去掉后缀ago或in，可以给short(tru传递true。

解析日期格式

可以使用以下命令用Node.js安装 −

npm install moment-parseformat

示例

var a = moment.parseFormat('Friday 2018 27 april 10:28:10');

输出

观察输出显示，无论为 parseFormat 提供什么参数(日期/时间)，它都会提供如上所示的日期格式。

持续时间格式

您可以使用以下命令在 Node.js 上安装持续时间格式 −

持续时间格式的存储库可在此处获得 − https://github.com/jsmreese/moment-duration-format 让我们看一个持续时间格式的工作示例 −

示例

var a = moment.duration(969, "minutes").format("h:mm:ss");

输出

这会为所创建时刻的持续时间添加更多详细信息。

日期范围

您可以使用以下命令在 Node.js 上安装日期范围 −

npm install moment-range

示例

window['moment-range'].extendMoment(moment);
var start = new Date(2012, 0, 15);
var end = new Date(2012, 4, 23);
var range = moment.range(start, end);
console.log(range.start._d);
console.log(range.end._d);

输出

精确范围

精确范围将以日期、时间和人类可读的格式显示准确的日期差异。您可以使用以下命令在 Node.js 上安装精确范围 −

npm install moment-precise-range-plugin

示例

var a = moment("1998-01-01 09:00:00").preciseDiff("2011-03-04 18:05:06");

输出

MomentJS - 示例

到目前为止，我们已经学习了 MomentJS 中的许多概念。本章为您提供了进一步的示例，以便您更好地理解。

显示两个日期之间的日期范围

这是一个显示两个给定日期之间的日期的示例。

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <h1>Dates display between 2014-05-01 and 2014-05-16</h1>
      <div id="container">
         <table id="datedetails" ></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
               var next = moment(start).add(1, 'd');
               arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-05-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

我们希望显示 2014-05-01 至 2014-05-16 之间的所有日期。我们使用日期查询 isSameOrAfter、日期添加和日期格式 来实现我们想要的效果。

输出

显示 2014-05-01 至 2014-08-16 之间的星期日

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <h1>Sundays between 2014-05-01 and 2014-08-16</h1>
      <div id="container">
         <table id="datedetails"></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) {
                  if (moment(start).format("dddd") === "Sunday") {
                     arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
                  }
               }
               var next = moment(start).add(1, 'd');
               if (moment(next).format("dddd") === "Sunday") {
                  arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               }
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-08-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

输出

按地区显示日期详情

这里我们使用包含所有地区设置的 moment.locale 脚本。

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <script type="text/JavaScript" src="momentlocale.js" charset="UTF-8"></script>
      <style type="text/css">
         div {
            margin-top: 16px!important;
            margin-bottom: 16px!important;
            width:100%;
         }
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <div >
         Select Locale : <select id="locale" onchange="updatelocale()" style="width:200px;">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="fr-ca">French Canada</option>
            <option value="cs">Czech</option>
            <option value="zh-cn">Chinese</option>
            <option value="nl">Dutch<   /option>
            <option value="ka">Georgian</option>
            <option value="he">Hebrew</option>
            <option value="hi">Hindi</option>
            <option value="id">Indonesian</option>
            <option value="it">Italian</option>
            <option value="jv";Japanese</option>
            <option value="ko";Korean</option>
         </select>
      </div>
      <br/>
      <br/>>
      Display Date is different formats as per locale :<span id="localeid"></span><br/>
      <div>
         <table>
            <tr>
               <th>Format</th>
               <th>Display</th>
            </tr>
            <tr>
               <td><i>dddd, MMMM Do YYYY, h:mm:ss a</i></td>
               <td>
                  <div id="ldate"></div>
               </td>
            </tr>
            <tr>
               <td><i>LLLL</i></td>
               <td>
                  <div id="ldate1"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().format()</i></td>
               <td>
                  <div id="ldate2"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().calendar()</i></td>
               <td>
                  <div id="ldate3"></div>
               </td>
            </tr>
            <tr>
               <td><i>Months</i></td>
               <td>
                  <div id="ldate4"></div>
               </td>
            </tr>
            <tr>
               <td><i>Weekdays</i></td>
               <td>
                  <div id="ldate5"></div>
               </td>
            </tr>
         </table>
      </div>
      <script type="text/JavaScript">
         var updatelocale = function() {
            var a = moment.locale(document.getElementById("locale").value);
            var k = moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
            var k1 = moment().format("LLLL");
            var k2 = moment().format();
            var k3 = moment().calendar();
            var k4 = moment.months();
            var k5 = moment.weekdays();
            document.getElementById("localeid").innerHTML = "<b>"+a+"</b>";
            document.getElementById("ldate").innerHTML = k;
            document.getElementById("ldate1").innerHTML = k1;
            document.getElementById("ldate2").innerHTML = k2;
            document.getElementById("ldate3").innerHTML = k3;
            document.getElementById("ldate4").innerHTML = k4;
            document.getElementById("ldate5").innerHTML = k5;
         };
         updatelocale();
      </script>
   </body>
</html>

输出 1

输出 2

输出 3

输出 4

Sr.No.	语言环境和描述
1	全局语言环境我们可以全局分配语言环境，所有日期/时间详细信息将在分配的语言环境中可用。
2	本地更改语言环境我们需要在本地应用语言环境，以防我们需要在应用程序中处理许多语言环境。
3	在浏览器中使用语言环境我们可以开始通过在脚本标记中包含语言环境文件来处理语言环境。
4	使用 Node.js 的语言环境如果您碰巧使用 Node.js，那么当您执行 npm install moment 时，您将已经拥有语言环境文件。
5	momentjs_Listing 当前语言环境的日期/时间详细信息您可以设置语言环境并检查月份、工作日等详细信息。
6	检查当前语言环境我们可以使用 moment.locale() 检查当前语言环境。
7	访问语言环境特定功能这里将看到当前加载的语言环境上可用的方法和属性。

Sr.No.	本地化 &描述
1	月份名称您可以将月份名称添加到语言环境自定义中。
2	月份缩写此方法有助于自定义月份缩写。
3	星期名称此方法有助于根据语言环境。
4	星期缩写此方法有助于根据语言环境设置自定义星期缩写。
5	最小星期缩写此方法有助于根据语言环境设置自定义最小星期缩写。
6	长日期格式此方法有助于根据语言环境自定义 longdateformat。
7	相对时间此方法有助于获取相对时间。
8	AM/PM 此方法有助于根据语言环境自定义子时区。
9	AM/PM 解析您可以使用以下方法解析 AM/PM此方法。
10	日历这有助于为区域设置自定义日历对象。
11	序数日期的序数显示可以根据区域设置进行更改。
12	相对时间阈值这与 duration.humanize 一起使用，其中持续时间的长度显示为几秒前、一分钟前、一小时前等等

MomentJS 教程

MomentJS 有用资源

MomentJS - 快速指南

MomentJS - 概述

功能

解析

日期验证

操作

获取/设置

显示

日期查询

持续时间

国际化

自定义

实用程序

插件

MomentJS - 环境设置

方法 1:在浏览器中使用 MomentJS 文件

步骤 1

步骤 2

Example

输出

输出

方法 2:使用 Node.js

方法 3:使用 Bower

MomentJS - 简介

MomentJS 和 RequireJS

Example project.html

main.js

MomentJS 和 TypeScript

package.json

main.ts

gulpfile.js

MomentJS - 解析日期和时间

解析日期

MomentJS - 日期验证

解析标志

输出

MomentJS - Getter/Setter

MomentJS - 操作日期和时间

操作日期和时间的方法

MomentJS - 格式化日期和时间

格式化日期和时间的方法

MomentJS - 日期查询

MomentJS 中查询日期的方法

MomentJS - 国际化

MomentJS - 自定义

MomentJS - 持续时间

持续时间可用的方法

MomentJS - 实用程序

MomentJS - 插件

日历插件

ISO 日历

波斯日历

日期格式插件

Java DateFormat 解析器

短日期格式化程序

解析日期格式

持续时间格式

日期范围

精确范围

MomentJS - 示例

显示两个日期之间的日期范围

输出

显示 2014-05-01 至 2014-08-16 之间的星期日

输出

按地区显示日期详情

输出 1

输出 2

输出 3

输出 4

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！