MomentJS-概要

MomentJSは、JavaScriptで日付/時刻を非常に簡単な方法で解析、検証、操作、表示するのに役立つJavaScriptライブラリです。この章では、MomentJSの概要を説明し、その機能について詳しく説明します。

Moment JSでは、ローカライズごとに、人間が読める形式で日付を表示できます。スクリプトメソッドを使用して、ブラウザ内でMomentJSを使用できます。 Node.jsでも利用可能で、npmを使用してインストールできます。

MomentJSでは、日付の追加、減算、検証、最大日付、最小日付の取得など、使いやすいメソッドを多数見つけることができます。これはオープンソースプロジェクトであり、ライブラリに簡単に貢献し、プラグインの形で機能を追加し、GitHubおよびNode.jsで利用可能にすることができます。

特徴

MomentJSで利用可能なすべての重要な機能を詳細に理解しましょう-

構文解析

解析により、日付を必要な形式で解析できます。日付の解析は、文字列、オブジェクト、配列で利用できます。 moment.cloneを使用して、瞬間のクローンを作成できます。 UTC形式で日付を出力する方法があります。

日付検証

日付検証は、MomentJSを使用すると非常に簡単です。メソッド* isValid（）*を使用して、日付が有効かどうかを確認できます。 MomentJSは、日付検証の確認に使用できる多くの解析フラグも提供します。

操作

momentオブジェクトの日付と時刻を操作するさまざまなメソッドがあります。 add、subtract、startoftime、endoftime、local、utc、utcoffsetなどは、MomentJSで日付/時刻に必要な詳細を提供する利用可能なメソッドです。

取得/設定

Get/Setを使用すると、日付の単位を読み取って設定できます。それは、時間、分、秒、ミリ秒、月の日付、曜日、年の日、年の週、月、年、四半期、週の年、年の週、取得/設定、最大値の変更と読み取りを可能にします、最小など Get/Setは、MomentJSで利用できる非常に便利な機能です。

表示

Displayは、さまざまな方法で日付を表示するための形式を提供します。特定の瞬間からの時間、現在の瞬間からの時間、2つの瞬間の差などを伝える方法があります。 JSON形式、配列、オブジェクト、文字列などで日付を表示できます。

日付クエリ

日付クエリには、日付が入力よりも大きいか小さいか、指定された日付の間、うるう年、瞬間、日付などを示す使いやすいメソッドがあります。日付の検証に非常に役立ちます。

期間

期間は、MomentJSの重要な機能の1つです。基本的に、指定されたユニットの時間の長さを処理します。利用可能な humanize メソッドは、人間が読める形式で日付を表示します。

国際化

国際化は、MomentJSのもう1つの重要な機能です。ロケールに基づいて日付と時刻を表示できます。ロケールは、必要に応じて特定の瞬間に適用できます。すべてのロケールを含むMomentJSホームサイトから縮小ファイルを取得します。特定のロケールを扱う場合は、そのロケールファイルだけを追加して作業することもできます。月、週、日の名前は、指定されたロケールで表示されます。

カスタマイズ

MomentJSでは、作成されたロケールをカスタマイズできます。要件に応じて、定義されたロケールの月名、月の省略形、曜日名、曜日の省略形、長い日付形式、およびカレンダー形式をカスタマイズできます。

公益事業

ユーティリティには、 normalize units および invalid の2つの方法があります。それらは瞬間的に使用され、必要に応じて出力を変更またはカスタマイズするのに役立ちます。また、momentオブジェクトに独自のカスタム検証を設定することもできます。

プラグイン

プラグインは、MomentJSの追加機能です。カレンダー、日付形式、解析、日付範囲、正確な範囲などに追加された多くのプラグインがあります。独自のプラグインを追加して、Node.jsおよびGitHubで使用可能にすることができます。

MomentJS-環境設定

この章では、ローカルコンピューターでMomentJSの作業環境を設定する方法について詳しく学習します。 MomentJSでの作業を開始する前に、ライブラリにアクセスできる必要があります。次の方法のいずれかでそのファイルにアクセスできます-

方法1：ブラウザーでMomentJSファイルを使用する

この方法では、公式WebサイトのMomentJSファイルが必要になり、ブラウザーで直接使用します。

ステップ1

最初のステップとして、MomentJSの公式Webサイトhttps://momentjs.com/[https://momentjs.com]にアクセスします。ここに示すようなホームページがあります-

セットアップ

利用可能な最新の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 type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

ここで与えられているのは、モーメントロケールの実用例と、より良い理解のための出力です-

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

さて、コマンドプロンプトで、以下のスクリーンショットに示すようにコマンドノードtest.jsを実行します-

NodeJSテスト

このコマンドは、* moment（）。toString（）*の出力を表示することに注意してください。

方法3：Bowerを使用する

Bowerは、MomentJSに必要なファイルを取得するもう1つの方法です。次のコマンドを使用して、Bowerを使用してMomentJSをインストールできます-

bower install --save moment

以下のスクリーンショットは、Bowerを使用したMomentJSのインストールを示しています-

バウアーの使用

これらは、MomentJSがインストールするためにBowerからロードされたファイルです。インストールされた瞬間とロケールファイルは、以下の画像に示されています-

Bower MomentJS

MomentJS-はじめに

この章では、RequireJS と *MomentJSとTypeScript を使用して* MomentJSを操作する方法について説明します。

MomentJSおよびRequireJS

RequireJSを使用したMomentJSの動作を理解するために、MomentJSとRequireJSを使用した動作例を分析してみましょう。対応するアプリのフォルダ構造は、次の画像に示されています-

MomentJSおよびRequireJS

RequireJS公式サイトから取得したrequire.jsファイルを取得できます-https://requirejs.org/docs/downloadl[[[1]]]理解を深めるために次のコードを確認してください-

プロジェクトの例

<!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* フォルダーにあることに注意してください。

以下は、ブラウザで確認できる projectl の出力です-

Requiredjsおよび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;

ファイルをtypescriptからJavaScript、つまり main.ts から main.js にビルドするには、* Gulpを使用する必要があります。次のコードは、ファイルのビルドに使用される 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およびTypescript

次の形式で示すように、フォルダ構造を見ることができます-

フォルダー構造

indexlのコードを以下に示します-

<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ネイティブ日付オブジェクトなどの形式で日付を解析できます。この章では、それらについて詳しく説明します。

解析日

MomentJSは、* moment（）*が呼び出されたときに出力としてラッパーオブジェクトを提供します。ブラウザで出力をコンソールするときに、次のことを確認できます。

解析日

MomentJSは、以下にリストするように日付を解析するためのさまざまなメソッドを提供します-

Sr.No.	Method & Syntax
1	Now moment（）
2	String モーメント（文字列）
3	Object モーメント（オブジェクト）
4	Date モーメント（日付）
5	Array moment（Array []）
6	Unix Timestamp モーメント（数値）
7	Moment Clone モーメント（モーメント）
8	UTC moment.utc（）
9	parseZone moment.parseZone（）
10	Creation Data moment（）。creationData（）;
11	Defaults var m = moment（\ {時間：3、分：40、秒：10}）;

MomentJS-日付検証

*MomentJS* は、日付の検証を簡単な方法で処理します。 日付を検証するために大量のコードを書く必要はありません。 * isValid（）*は、日付が有効であるかどうかを伝える、すぐに使用可能なメソッドです。 MomentJSは、日付検証の確認に使用できる多くの解析フラグも提供します。

解析フラグ

MomentJSは、指定された日付が無効とみなされる場合に、以下の解析フラグを提供します-

オーバーフロー-これは、指定された月が13日、日が1年で367日、月で32日、うるう年でない2月で29日などの場合に発生します。オーバーフローには、 invalidAt に一致する無効なユニットのインデックスが含まれます。 -1 はオーバーフローがないことを意味することに注意してください。

*invalidMonth* -無効な月名が表示されます。 無効な月の文字列またはnullが返されます。

空-日付ではない入力が与えられたとき。ブール値を返します。

*nullInput* -moment（null）のような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-ゲッター/セッター

MomentJSには、日付入力を取得/設定するための多くのメソッドがあります。 Getを使用すると、必要な入力ユニットを読み取ることができ、setを使用すると入力ユニットを変更できます。この章では、現時点で使用されるget/setメソッドについて詳しく説明します。

次の表は、使用可能なget/setメソッドを示しています-

Method	Syntax
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

MomentJS-日付と時刻の操作

MomentJS *は、モーメントオブジェクトの日付と時刻を操作するためのさまざまなメソッドを提供します。この章では、このようなすべての方法について詳しく説明します。

日付と時刻を操作する方法

次の表は、必要に応じて日付と時刻を操作するのに役立つMomentJSで利用可能なメソッドを示しています-

Sr.No.	Method & Syntax
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は、さまざまな方法で日付を表示する形式を提供します。特定の瞬間からの時間、現在の瞬間からの時間、2つの瞬間の差などを伝える方法があります。 JSON形式、配列、オブジェクト、文字列などで日付を表示できます。

日付と時刻をフォーマットする方法

次の表は、必要に応じて日付の表示/書式設定に役立つ利用可能なメソッドのリストを示しています。

Method	Syntax
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で使用可能なメソッドと、日付を照会するための構文を示しています-

Method	Syntax
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の重要な機能の1つです。ローカライズ、つまり国/地域に基づいて日付と時刻を表示できます。ロケールは、必要に応じて特定の瞬間に適用できます。

この章では、ロケールをグローバルに、ローカルに適用し、Node.jsを使用してロケールを操作し、ブラウザーで、必要なロケールなどで単位（月、平日など）を取得する方法について詳しく説明します。

Sr.No.	Locale & Description
1	Global locale ロケールをグローバルに割り当てることができ、割り当てられたロケールですべての日付/時刻の詳細が利用可能になります。
2	Changing Locale Locally アプリケーションで多くのロケールを処理する必要がある場合に備えて、ローカルに適用するロケールが必要です。
3	Using Locale in Browser スクリプトタグにロケールファイルを含めることで、ロケールの操作を開始できます。
4	Using Locale using Node.js Node.jsを使用する場合は、npmインストールの瞬間にロケールファイルがすぐに存在します。
5	momentjs_Listing date/time details of current locale ロケールを設定し、月、平日などの詳細を確認できます。
6	Checking current locale moment.locale（）を使用して現在のロケールを確認できます。
7	Accessing Locale Specific Functionality 現在ロードされているロケールで利用可能なメソッドとプロパティが表示されます。

MomentJS-カスタマイズ

*MomentJS* を使用すると、作成したロケールにカスタマイズを追加できます。 この章では、それらについて詳しく説明します。

次のリストは、ローカライズで可能なカスタマイズを示しています-

シニア

ローカリゼーションと説明

1

リンク：/momentjs/momentjs_customization_month_names [月の名前]

ロケールのカスタマイズに月名を追加できます。

2

リンク：/momentjs/momentjs_month_abbreviation [月の省略形]

このメソッドは、月の省略形をカスタマイズするのに役立ちます。

3

リンク：/momentjs/momentjs_weekday_names [平日の名前]

このメソッドは、ロケールごとに曜日名をカスタマイズするのに役立ちます。

4

リンク：/momentjs/momentjs_weekday_abbreviation [平日省略形]

このメソッドは、ロケールセットに基づいて曜日の省略形をカスタマイズするのに役立ちます。

5

リンク：/momentjs/momentjs_minimal_weekday_abbreviation [最小の曜日の省略形]

この方法は、ロケールセットに基づいて最小曜日の省略形をカスタマイズするのに役立ちます。

6

リンク：/momentjs/momentjs_long_date_formats [長い日付形式]

このメソッドは、ロケールのlongdateformatのカスタマイズに役立ちます。

7

リンク：/momentjs/momentjs_relative_time [相対時間]

この方法は、相対時間を取得するのに役立ちます。

8

リンク：/momentjs/momentjs_ampm [AM/PM]

このメソッドは、ロケールごとにメリディエムをカスタマイズするのに役立ちます。

9

リンク：/momentjs/momentjs_ampm_parsing [AM/PM解析]

この方法を使用してAM/PMを解析できます。

10

リンク：/momentjs/momentjs_calendar [カレンダー]

これは、ロケールセットのカレンダーオブジェクトのカスタマイズに役立ちます。

11

リンク：/momentjs/momentjs_ordinal [序数]

日付の序数表示は、ロケールに基づいて変更できます。

12

リンク：/momentjs/momentjs_relative_time_thresholds [相対時間しきい値]

これはduration.humanizeで使用され、持続時間の長さが*数秒前、1分、1時間前*などとして表示されます。

MomentJS-期間

MomentJSは、指定されたユニットの時間の長さを処理する期間と呼ばれる重要な機能を提供します。この章では、これについて詳しく学習します。

期間で利用可能なメソッド

次の表は、モーメントデュレーションで使用されるさまざまなユニットのデュレーションで使用可能なメソッドを示しています-

方法

構文

リンク：/momentjs/momentjs_creating [作成]

moment.duration（Number、String）;

moment.duration（数値）;

moment.duration（Object）;

moment.duration（String）;

リンク：/momentjs/momentjs_clone [クローン]

moment.duration（）。clone（）;

リンク：/momentjs/momentjs_humanize [Humanize]

moment.duration（）。humanize（）;

リンク：/momentjs/momentjs_milliseconds [ミリ秒]

moment.duration（）。milliseconds（）;

moment.duration（）。asMilliseconds（）;

リンク：/momentjs/momentjs_seconds [秒]

moment.duration（）。seconds（）;

moment.duration（）。asSeconds（）;

リンク：/momentjs/momentjs_minutes [分]

moment.duration（）。minutes（）;

moment.duration（）。asMinutes（）;

リンク：/momentjs/momentjs_hours [時間]

moment.duration（）。hours（）;

moment.duration（）。asHours（）;

リンク：/momentjs/momentjs_days [日]

moment.duration（）。days（）;

moment.duration（）。asDays（）;

リンク：/momentjs/momentjs_weeks [週]

moment.duration（）。weeks（）;

moment.duration（）。asWeeks（）;

リンク：/momentjs/momentjs_months [月]

moment.duration（）。months（）;

moment.duration（）。asMonths（）;

年

moment.duration（）。years（）;

moment.duration（）。asYears（）;

リンク：/momentjs/momentjs_add_time [時間を追加]

moment.duration（）。add（Number、String）;

moment.duration（）。add（Number）;

moment.duration（）。add（Duration）;

moment.duration（）。add（Object）;

リンク：/momentjs/momentjs_subtract_time [減算時間]

moment.duration（）。subtract（Number、String）;

moment.duration（）。subtract（Number）;

moment.duration（）。subtract（Duration）;

moment.duration（）。subtract（Object）;

リンク：/momentjs/momentjs_using_duration_with_diff [Diffでの期間の使用]

var duration = moment.duration（x.diff（y））

リンク：/momentjs/momentjs_as_unit_of_time [時間の単位として]

moment.duration（）。as（String）;

リンク：/momentjs/momentjs_get_unit_of_time [時間の単位を取得]

duration.get（ 'hours'）;

duration.get（ 'minutes'）;

duration.get（ 'seconds'）;

duration.get（ 'milliseconds'）;

リンク：/momentjs/momentjs_duration_as_json [JSONとして]

moment.duration（）。toJSON（）;

リンク：/momentjs/momentjs_is_duration [Is a Duration]

moment.isDuration（obj）;

リンク：/momentjs/momentjs_duration_as_iso_8601_string [ISO 8601文字列として]

moment.duration（）。toISOString（）;

リンク：/momentjs/momentjs_locale [ロケール]

moment.duration（）。locale（）;

moment.duration（）。locale（String）;

MomentJS-ユーティリティ

MomentJSでは、正規化ユニットと無効なメソッドを使用して、要件に従って出力を変更またはカスタマイズできます。 momentオブジェクトに独自のカスタム検証を設定することもできます。

詳細については、次の表をご覧ください-

Sr.No.

Method & Syntax

1

Normalize Units

moment.normalizeUnits（String）;

2

Invalid

moment.invalid（Object）;

MomentJS-プラグイン

プラグインは、MomentJSに追加された拡張機能です。 MomentJSはオープンソースプロジェクトであり、多くのプラグインがMomentJSに含まれています。これらのプラグインは、ユーザーによって提供され、Node.jsおよびGitHubを使用して利用できます。

この章では、MomentJSで使用できるカレンダープラグインと日付形式プラグインのいくつかについて説明します。

カレンダープラグイン

このセクションでは、* ISOカレンダーと台湾カレンダー*の2種類のカレンダープラグインについて説明します。

ISOカレンダー

次のコマンドを使用して、Node.jsでインストールできます-

npm install moment-isocalendar

GitHubからmoment-isocalendar.jsを取得できます。

例

var m = moment().isocalendar();

出力

プラグイン

例

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

出力

Isocalendarのプラグイン

台湾カレンダー

次のコマンドを使用して、Node.jsでインストールできます-

npm install moment-jalaali

GitHubからmoment-taiwan.jsを取得できます。

例

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

出力

プラグインGithub

日付形式プラグイン

このセクションでは、日付形式プラグインの次のタイプについて説明します-

Java dateformatパーサー
短い日付フォーマッター
日付形式の解析
期間の形式
期間
正確な範囲

Java DateFormatパーサー

次のコマンドを使用して、Node.jsでインストールできます-

GitHubからmoment-jdateformatparser.jsを取得できます。

例

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

出力

プラグインformatWithJDF

短い日付フォーマッター

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リンクから瞬間的にスクリプトを取得できます。

例

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

出力

プラグイン4

サフィックス ago または in を削除する場合は、trueをshort（truに渡すことができます。

日付形式の解析

次のコマンドを使用して、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で多くの概念を学びました。この章では、理解を深めるためにさらに例を示します。

2つの日付間の日付範囲を表示する

これは、指定された2つの日付の間の日付を表示する例です。

<!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/&gt>
      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>

Momentjs-quick-guide

MomentJS-概要

特徴

構文解析

日付検証

操作

取得/設定

表示

日付クエリ

期間

国際化

カスタマイズ

公益事業

プラグイン

MomentJS-環境設定

方法1：ブラウザーでMomentJSファイルを使用する

ステップ1

ステップ2

例

出力

出力

方法2：Node.jsを使用する

方法3：Bowerを使用する

MomentJS-はじめに

MomentJSおよびRequireJS

プロジェクトの例

main.js

MomentJSおよびTypeScript

package.json

main.ts

gulpfile.js

MomentJS-日付と時刻の解析

解析日

MomentJS-日付検証

解析フラグ

出力

MomentJS-ゲッター/セッター

MomentJS-日付と時刻の操作

日付と時刻を操作する方法

MomentJS-日付と時刻のフォーマット

日付と時刻をフォーマットする方法

MomentJS-日付クエリ

MomentJSで日付をクエリするためのメソッド

MomentJS-国際化

MomentJS-カスタマイズ

MomentJS-期間

期間で利用可能なメソッド

MomentJS-ユーティリティ

MomentJS-プラグイン

カレンダープラグイン

ISOカレンダー

台湾カレンダー

日付形式プラグイン

Java DateFormatパーサー

短い日付フォーマッター

日付形式の解析

期間の形式

期間

正確な範囲

MomentJS-例

2つの日付間の日付範囲を表示する

出力

2014-05-01〜2014-08-16の日曜日を表示

出力

ロケールごとに日付の詳細を表示する

出力1

出力2

出力3

出力4