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 格式、陣列、物件、字串等顯示日期。

日期查詢

日期查詢具有易於使用的函式，可以判斷日期是否大於或小於輸入值，是否在給定的日期之間，是否是閏年，是否是 moment 物件，是否是日期等。它在日期驗證中非常有用。

時長

時長是 MomentJS 中的重要功能之一。它主要處理給定單位的時間長度。可用的 humanize 方法以人類可讀的格式顯示日期。

國際化

國際化是 MomentJS 的另一個重要功能。您可以根據區域設定顯示日期和時間。如果需要，可以將區域設定應用於特定 moment 物件。您將從 MomentJS 首頁獲得包含所有區域設定的壓縮檔案。如果您只處理特定的區域設定，也可以只新增該區域設定檔案並使用它。月份、星期和星期的名稱將以指定的區域設定顯示。

自定義

MomentJS 允許自定義建立的區域設定。您可以根據需要自定義月份名稱、月份縮寫、星期幾名稱、星期幾縮寫、長日期格式和日曆格式。

工具函式

工具函式包含兩個方法：normalize units 和 invalid。它們與 moment 物件一起使用，可以幫助我們根據需要更改或自定義輸出。它還允許我們對 moment 物件設定自定義驗證。

外掛

外掛是 MomentJS 的附加功能。有很多外掛新增到日曆、日期格式、解析、日期範圍、精確範圍等。您可以新增自己的外掛，並使其在 Node.js 和 GitHub 上可用。

MomentJS - 環境搭建

本章將詳細介紹如何在本地計算機上設定 MomentJS 的工作環境。在開始使用 MomentJS 之前，您需要訪問該庫。您可以透過以下任何一種方法訪問其檔案：

方法 1：在瀏覽器中使用 MomentJS 檔案

在這種方法中，我們將從其官方網站獲取 MomentJS 檔案，並直接在瀏覽器中使用它。

步驟 1

第一步，訪問 MomentJS 的官方網站 https://momentjs.com 您將看到如下所示的首頁：

Setup

您可以看到有一個下載選項，可以下載最新的 MomentJS 檔案。請注意，該檔案有壓縮和未壓縮版本。

步驟 2

現在，在 script 標籤內包含 moment.js 並開始使用 MomentJS。為此，您可以使用以下程式碼：

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

為了更好地理解，這裡給出一個可執行的示例及其輸出：

示例

線上演示 
<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 標籤中，如下所示，並使用您選擇的不同區域設定。為此，您可以使用以下程式碼：

<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 後，您將看到以下輸出：

NodeJs

現在，要測試 MomentJS 是否可以在 Node.js 中正常工作，請建立檔案 test.js 並向其中新增以下程式碼：

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

現在，在命令提示符中，執行命令 node test.js，如下面的螢幕截圖所示：

NodeJS Test

請注意，此命令將顯示 moment().toString() 的輸出。

方法 3：使用 Bower

Bower 是獲取 MomentJS 所需檔案的另一種方法。您可以使用以下命令使用 Bower 安裝 MomentJS：

bower install --save moment

下面的螢幕截圖顯示了使用 Bower 安裝 MomentJS：

Using Bower

這些是從 Bower 載入的用於安裝 MomentJS 的檔案。安裝的 moment 和 locale 檔案如下圖所示：

Bower MomentJS

MomentJS - 簡介

本章將討論如何使用 MomentJS 和 RequireJS 以及 MomentJS 和 TypeScript。

MomentJS 和 RequireJS

為了瞭解使用 RequireJS 的 MomentJS 的工作方式，讓我們分析一個使用 MomentJS 和 RequireJS 的可執行示例。相應應用程式的資料夾結構如下圖所示：

MomentJS and RequireJS

您可以從 RequireJS 官方網站獲取 require.js 檔案： https://requirejs.org/docs/download.html 檢視以下程式碼以更好地理解：

示例 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 的輸出：

Requiredjs and MomentJS

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
   });
});

這是執行上面程式碼時看到的輸出：

MomentJS and Typescript

您可以看到如下所示的資料夾結構：

Folder Structure

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>

現在，如果您開啟 https://:8080/，您將看到如下所示的輸出：

Localhost

MomentJS - 解析日期和時間

MomentJS 有許多易於使用的函式，可以幫助解析日期和時間。它可以解析物件、字串、陣列、JavaScript 原生日期物件等形式的日期。本章將詳細討論它們。

解析日期

呼叫 moment() 時，MomentJS 會輸出包裝器物件。當您在瀏覽器中檢視控制檯輸出時，您可以看到以下內容。

Parsing Date

MomentJS 提供多種解析日期的方法，如下所示：

序號 方法及語法
1 現在

moment()
2 字串

moment(string)
3 物件

moment(object)
4 日期

moment(Date)
5 陣列

moment(Array[])
6 Unix 時間戳

moment(number)
7 Moment 克隆

moment(Moment)
8 UTC

moment.utc()
9 parseZone

moment.parseZone()
10 建立時間資料

moment().creationData();
11 預設值

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 - 空輸入，例如 moment(null); 它返回一個布林值。

invalidFormat - 當給定的格式為空時，例如 moment('2018-04-25', [])。它返回布林值。

userInvalidated - 明確建立為無效的日期，例如 moment.invalid()。它返回布林值。

meridiem - 指示解析的子午線 (AM/PM)，如果存在。它返回字串。

parsedDateParts - 它返回一個已解析的日期部分陣列，例如 parsedDateParts[0] 為年份、parsedDateParts[1] 為月份，parsedDateParts[2] 為日期。如果不存在任何部分，但子午線有值，則日期無效。它返回一個數組。

請考慮以下示例以瞭解日期驗證：

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

輸出

Validation

invalidAt 的輸出為 1，它指向月份，因為月份值大於 12 並且溢位。如果發生溢位，invalidAt 將給出如下表所示的輸出：

0 年份
1 月份
2 日期
3 小時
4 分鐘
5 秒
6 毫秒

如果給定的日期中有多個溢位，它將是第一個溢位索引的輸出。

MomentJS - Getter/Setter

MomentJS 有許多方法可以獲取/設定日期輸入。Get 允許我們讀取所需的輸入單位，而 Set 允許修改輸入單位。本章將詳細討論 moment 物件上使用的 get/set 方法。

下表顯示了可用的 get/set 方法：

方法 語法
毫秒

moment().millisecond(Number)

moment().millisecond();

moment().milliseconds(Number);

moment().milliseconds();
秒

moment().second(數字);

moment().second();

moment().seconds(數字);

moment().seconds();
分鐘

moment().minute(數字);

moment().minute();

moment().minutes(數字);

moment().minutes();
小時

moment().date(數字);

moment().date();

moment().dates(數字);

moment().dates();
星期幾

moment().day(數字|字串);

moment().day();

moment().days(數字|字串);

moment().days();
月份日期

moment().date(數字);

moment().date();

moment().dates(數字);

moment().dates();
一年中的第幾天

moment().dayOfYear(數字);

moment().dayOfYear();
一年中的第幾周

moment().week(數字);

moment().week();

moment().weeks(數字);

moment().weeks();
一年中的第幾周 (ISO)

moment().isoWeek(數字);

moment().isoWeek();

moment().isoWeeks(數字);

moment().isoWeeks();
月份

moment().month(數字|字串);

moment().month();
季度

moment().quarter();

moment().quarter(數字);

moment().quarters();

moment().quarters(數字);
年份

moment().year(數字);

moment().year();
週數年份

moment().weekYear(數字);

moment().weekYear();
一年中的週數

moment().weeksInYear();
獲取

moment().get('year');

moment().get('month');

moment().get('date');

moment().get('hour');

moment().get('minute');

moment().get('second');

moment().get('millisecond');
設定

moment().set(字串, 整數);

moment().set(物件(字串, 整數));
最大值

moment.max(Moment[,Moment...]);

moment.max(Moment[]);
最小值

moment.min(Moment[,Moment...]);

moment.min(Moment[]);

MomentJS - 操作日期和時間

MomentJS 提供各種方法來操作 moment 物件上的日期和時間。本章將詳細介紹所有這些方法。

操作日期和時間的方法

下表顯示了 MomentJS 中可用的方法，這些方法有助於根據需要操作日期和時間：

序號 方法及語法
1 新增

moment.add()
2 減去

moment.subtract()
3 時間開始

moment.startof()
4 時間結束

moment.endof()
5 本地時間

moment.local()
6 UTC

moment.utc()
7 UTC 偏移量

moment.utcOffset()

MomentJS - 格式化日期和時間

MomentJS 提供各種格式來以不同的方式顯示日期。有一些方法可以從給定的時刻、當前時刻以及兩個時刻之間的差異來顯示時間等。它可以以 JSON 格式、陣列、物件、字串等顯示日期。

格式化日期和時間的方法

下表顯示了有助於根據需要顯示/格式化日期的方法列表。

方法 語法
格式化

moment().format();

moment().format(字串);
距現在的時間

moment().fromNow();

moment().fromNow(布林值);
距X的時間

moment().from (Moment|字串|數字|日期|陣列);

距現在的時間

moment().toNow();

moment().toNow(布林值);
距X的時間

moment().to(Moment|字串|數字|日期|陣列);

moment().to(Moment|字串|數字|日期|陣列, 布林值);
日曆時間

moment().calendar();

moment().calendar(參考時間);

moment().calendar(參考時間, 格式);
差異

moment().diff(Moment|字串|數字|日期|陣列);

moment().diff(Moment|字串|數字|日期|陣列, 字串);

moment().diff(Moment|字串|數字|日期|陣列, 字串, 布林值);
Unix 時間戳（毫秒）

moment().valueOf();

+moment();
Unix 時間戳（秒）

moment().unix();
月份的天數

moment().daysInMonth();
作為 JavaScript 日期

moment().toDate();
作為陣列

moment().toArray();
作為 JSON

moment().toJSON();
作為 ISO 8601 字串

moment().toISOString();

moment().toISOString(keepOffset);
作為物件

moment().toObject();
作為字串

moment().toString();
檢查

moment().inspect();

MomentJS - 日期查詢

MomentJS 提供了查詢日期/時間是否為閏年、日期比較、日期驗證等的方法。本章將詳細討論它們。

MomentJS 中查詢日期的方法

下表顯示了 MomentJS 中可用的方法及其查詢日期的語法：

方法 語法
是否早於

moment().isBefore(Moment|字串|數字|日期|陣列);

moment().isBefore(Moment|字串|數字|日期|陣列, 字串);
是否相同

moment().isSame(Moment|字串|數字|日期|陣列);

moment().isSame(Moment|字串|數字|日期|陣列, 字串);
是否晚於

moment().isAfter(Moment|字串|數字|日期|陣列);

moment().isAfter(Moment|字串|數字|日期|陣列, 字串);
是否相同或早於

moment().isSameOrBefore(Moment|字串|數字|日期|陣列);

moment().isSameOrBefore(Moment|字串|數字|日期|陣列, 字串);
是否相同或晚於

moment().isSameOrAfter(Moment|字串|數字|日期|陣列);

moment().isSameOrAfter(Moment|字串|數字|日期|陣列, 字串);
是否介於之間

moment().isBetween(類似 moment 的物件, 類似 moment 的物件);

moment().isBetween(類似 moment 的物件, 類似 moment 的物件, 字串);
是否為夏令時

moment().isDST();

是否為閏年

moment().isLeapYear();

是否為 Moment 物件

moment.isMoment(obj);

是否為日期物件

moment.isDate(obj);

MomentJS - 國際化

國際化是 MomentJS 中的重要功能之一。您可以根據本地化顯示日期和時間，換句話說，根據國家/地區顯示。如果需要，可以將語言環境應用於特定時刻。

本章將詳細討論如何全域性應用語言環境、區域性應用語言環境、使用 Node.js 和瀏覽器處理語言環境、獲取所需語言環境中的單位（月份、星期幾等）等。

序號 語言環境和描述
1 全域性語言環境

我們可以全域性分配語言環境，所有日期/時間詳細資訊都將在分配的語言環境中可用。
2 區域性更改語言環境

如果我們需要在一個應用程式中處理多個語言環境，則需要區域性應用語言環境。
3 在瀏覽器中使用語言環境

我們可以透過在 script 標籤中包含語言環境檔案來開始使用語言環境。
4 使用 Node.js 使用語言環境

如果您碰巧使用 Node.js，則在執行 npm install moment 時，moment 中將已經有語言環境檔案。
5 momentjs_列出當前語言環境的日期/時間詳細資訊

您可以設定語言環境並檢查月份、星期幾等詳細資訊。
6 檢查當前語言環境

我們可以使用 moment.locale() 檢查當前語言環境。
7 訪問特定於語言環境的功能

這裡我們將看到當前載入的語言環境中可用的方法和屬性。

MomentJS - 自定義

MomentJS 允許對建立的語言環境進行自定義。本章將詳細討論它們。

以下列表顯示了本地化可能的自定義項：

序號 本地化和描述
1 月份名稱

您可以將月份名稱新增到語言環境自定義中。
2 月份縮寫

此方法有助於自定義月份縮寫。
3 星期名稱

此方法有助於根據語言環境自定義星期名稱。
4 星期縮寫

此方法有助於根據設定的語言環境自定義星期縮寫。
5 最小星期縮寫

此方法有助於根據設定的語言環境自定義最小星期縮寫。
6 長日期格式

此方法有助於為語言環境自定義長日期格式。
7 相對時間

此方法有助於獲取相對時間。
8 上午/下午

此方法有助於根據語言環境自定義子午線。
9 上午/下午解析

您可以使用此方法解析上午/下午。
10 日曆

這有助於為設定的語言環境自定義日曆物件。
11 序數

日期的序數顯示可以根據語言環境更改。
12 相對時間閾值

這與 duration.humanize 一起使用，其中持續時間的長度顯示為 **幾秒鐘前、一分鐘內、一小時前** 等。

MomentJS - 時長

MomentJS 提供了一個重要的功能，稱為持續時間，它處理給定單位的時間長度。在本章中，您將詳細瞭解這一點。

持續時間可用的方法

下表顯示了持續時間中可用的方法，這些方法用於 moment 持續時間的不同單位：

方法 語法
建立

moment.duration(數字, 字串);

moment.duration(數字);

moment.duration(物件);

moment.duration(字串);
克隆

moment.duration().clone();
人性化

moment.duration().humanize();
毫秒

moment.duration().milliseconds();

moment.duration().asMilliseconds();
秒

moment.duration().seconds();

moment.duration().asSeconds();
分鐘

moment.duration().minutes();

moment.duration().asMinutes();
小時

moment.duration().hours();

moment.duration().asHours();
天

moment.duration().days();

moment.duration().asDays();
周

moment.duration().weeks();

moment.duration().asWeeks();
月

moment.duration().months();

moment.duration().asMonths();
年

moment.duration().years();

moment.duration().asYears();
新增時間

moment.duration().add(數字, 字串);

moment.duration().add(數字);

moment.duration().add(持續時間);

moment.duration().add(物件);
減去時間

moment.duration().subtract(數字, 字串);

moment.duration().subtract(數字);

moment.duration().subtract(持續時間);

moment.duration().subtract(物件);
將持續時間與 Diff 一起使用

var duration = moment.duration(x.diff(y))
作為時間單位

moment.duration().as(字串);
獲取時間單位

duration.get('hours');

duration.get('minutes');

duration.get('seconds');

duration.get('milliseconds');
作為 JSON

moment.duration().toJSON();
是否為持續時間

moment.isDuration(obj);
作為 ISO 8601 字串

moment.duration().toISOString();
語言環境

moment.duration().locale();

moment.duration().locale(字串);

MomentJS - 工具函式

在 MomentJS 中，您可以使用規範化單元和無效方法根據需要更改或自定義輸出。您還可以對 moment 物件設定您自己的自定義驗證。

請查看下錶以瞭解更多資訊：

序號 方法及語法
1 規範化單位

moment.normalizeUnits(字串);
2 無效

moment.invalid(物件);

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();

輸出

Plugins

示例

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

輸出

Plugins fromIsocalendar

臺灣日歷

您可以使用以下命令使用 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();

輸出

Plugins Github

日期格式外掛

本節將討論以下型別的日期格式外掛：

  • Java 日期格式解析器
  • 短日期格式化程式
  • 解析日期格式
  • 持續時間格式
  • 日期範圍
  • 精確範圍

Java 日期格式解析器

您可以使用以下命令使用 Node.js 安裝它：

您可以從 GitHub 獲取 moment-jdateformatparser.js - https://github.com/MadMG/moment-jdateformatparser 請觀察以下 moment-jdateformatparser 和 MomentJS 的工作示例：

示例

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

輸出

Plugins formatWithJDF

短日期格式化程式

可以從 GitHub 獲取 shortdateformat 的 JavaScript 檔案：

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

語法

moment().short();

顯示如下表所示：

來自 moment 來自 moment().short()
0 到 59 秒 0 到 59 秒
1 到 59 分鐘 1 到 59 分
1 到 23 小時 1 小時到 23 小時
1 到 6 天 1 天到 6 天
≥ 7 天且同年 顯示將類似於 2 月 3 日、3 月 6 日
≥ 7 天且不同年 顯示將類似於 2018 年 2 月 3 日、2018 年 3 月 6 日

您可以從上面給出的 GitHub 連結獲取 momentshort 指令碼。

示例

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

輸出

Plugins Four

如果您想刪除字尾 **ago** 或 **in**，可以將 true 傳遞給 short(tru。

解析日期格式

您可以使用以下命令使用 Node.js 安裝它：

npm install moment-parseformat

示例

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

輸出

Parse Date Format

請注意，輸出顯示無論將哪些引數（日期/時間）傳遞給 parseFormat，它都會顯示如上所示的日期格式。

持續時間格式

您可以使用以下命令在 Node.js 上安裝持續時間格式：

持續時間格式的程式碼庫在此處可用：https://github.com/jsmreese/moment-duration-format 讓我們來看一個使用持續時間格式的實際例子：

示例

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

輸出

Plugins Repository

這為 moment 建立的持續時間添加了更多細節。

日期範圍

您可以使用以下命令在 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);

輸出

Plugins Install Date

精確範圍

精確範圍將以日期、時間和人類可讀的格式顯示確切的日期差。您可以使用以下命令在 Node.js 上安裝精確範圍：

npm install moment-precise-range-plugin

示例

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

輸出

Precise Range

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、日期加法和日期格式** 來實現我們的目標。

輸出

Date Range

顯示 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>

輸出

Sundays

根據區域設定顯示日期詳細資訊

這裡我們使用 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

Display Date

輸出 2

Display Date EA

輸出 3

Display Date Hi

輸出 4

Display Date JV
列印頁面
上一頁
下一頁
廣告