Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@yun_bow

[Moment.js] JavaScriptで日付を表示する

More than 1 year has passed since last update.

JavaScriptで日付表示を行うことができるライブラリを紹介します。

Moment.js
https://momentjs.com/

Moment Timezone
https://momentjs.com/timezone/

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

JavaScriptライブラリ
Bootstrap: 3.3.7
jQuery: 3.3.1
moment: 2.24.0
moment-timezone: 0.5.25-2019a

Moment.js とは

JavaScript で文字列からオブジェクトに変換したり、オブジェクトから指定したフォーマット文字列に変換したりできます。また、月末日時や加算減算が簡単に取得することができます。

ライブラリの読み込み

moment.min.jsを参照します。

<script type="text/javascript" src="../lib/moment/moment.min.js"></script>

デモはこちら
ソースファイルはこちら

基本的な使い方

入力

現在時刻を入力する

moment(); // 2019-05-15T15:15:50.900Z

JSON型文字列で入力する

moment('2018-12-25T01:30:00.123Z'); // 2018-12-25T01:30:00.123Z

指定したフォーマットで入力する

moment('2018-12-25', 'YYYY-MM-DD'); // 2018-12-24T15:00:00.000Z

入力した文字列が正しいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isValid(); // => true
moment('xxx', 'YYYY-MM-DD').isValid(); // => false

特定の値を指定して入力する

moment({year:2018,month:11,day:25,hour:1,minute:30,second:0,millsecond:123}); // 2018-12-24T16:30:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('year', 2015); // 2015-12-24T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('month', 0); // 2018-01-24T15:00:00.000Z (0から始まる)
moment('2018-12-25', 'YYYY-MM-DD').set('date', 1); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('day', 1); // 2018-12-23T15:00:00.000Z (曜日)
moment('2018-12-25', 'YYYY-MM-DD').set('hour', 1); // 2018-12-24T16:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('minute', 1); // 2018-12-24T15:01:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('second', 1); // 2018-12-24T15:00:01.000Z
moment('2018-12-25', 'YYYY-MM-DD').set('millisecond', 1); // 2018-12-24T15:00:00.001Z

月初め、月末を入力する

moment('2018-12-25', 'YYYY-MM-DD').startOf('month'); // 2018-11-30T15:00:00.000Z
moment('2018-12-25', 'YYYY-MM-DD').endOf('month'); // 2018-12-31T14:59:59.999Z

出力

Date型オブジェクトで出力する

moment().toDate(); // => Wed May 15 2019 13:03:18 GMT+0900 (日本標準時)

JSON型文字列で出力する

moment().toJSON(); // => 2019-05-15T04:03:18.900Z

指定したフォーマットで出力する

moment().format('YYYY-MM-DD'); // => 2019-05-15
moment().format(); // => 2019-05-15T13:03:18+09:00 (ISO8601)

特定の値を出力する

moment().get('year'); // => 2019
moment().get('month'); // => 4 (0から始まる)
moment().get('date'); // => 15
moment().get('day'); // => 3 (曜日)
moment().get('hour'); // => 23
moment().get('minute'); // => 48
moment().get('second'); // => 8
moment().get('millisecond'); // => 514

計算

加算する

moment('2018-12-25', 'YYYY-MM-DD').add(1, 'months'); // 2019-01-24T15:00:00.000Z

減算する

moment('2018-12-25', 'YYYY-MM-DD').subtract(1, 'months'); // 2018-11-24T15:00:00.000Z

2つの日付の差分を取得する

moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'year'); // => 1
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'month'); // => 12
moment('2018-12-25', 'YYYY-MM-DD').diff(moment('2017-12-25', 'YYYY-MM-DD'), 'days'); // => 365

比較

2つの日付が等しいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSame(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

より小さいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isBefore(moment('2019-01-25', 'YYYY-MM-DD'), 'month'); // => true

より大きいことを判定する

moment('2018-12-25', 'YYYY-MM-DD').isAfter(moment('2018-11-25', 'YYYY-MM-DD'), 'month'); // => true

以下であることを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSameOrBefore(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

以上であることを判定する

moment('2018-12-25', 'YYYY-MM-DD').isSameOrAfter(moment('2018-12-25', 'YYYY-MM-DD'), 'month'); // => true

多言語化

多言語化対応している出力については、別途ライブラリファイルを読み込む必要があります。

ライブラリの読み込み

moment-with-locales.min.jsを参照します。

index.html
<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>

デモはこちら
ソースファイルはこちら

ロケールを変更する

moment.locale(lang);

曜日を出力する

moment().format('YYYY-MM-DD(dddd)'); // => 2019-05-15(Wednesday)

午前/午後を出力する

moment().format('YYYY-MM-DD a'); // => 2019-05-15 pm

~前を出力する

moment('2018-12-25', 'YYYY-MM-DD').fromNow(); // => 5 months ago

カレンダー形式で出力する

moment('2018-12-25', 'YYYY-MM-DD').calendar(); // => 12/25/2018

タイムゾーン

タイムゾーンに対応する場合は、別途ライブラリファイルを読み込む必要があります。

ライブラリの読み込み

下記のファイルを参照します。
moment-timezone.min.js
moment-timezone-with-data.min.js
moment-timezone-with-data-2012-2022.min.js

index.html
<script type="text/javascript" src="../lib/moment/moment.min.js"></script>
<script type="text/javascript" src="../lib/moment/moment-with-locales.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data.min.js"></script>
<script type="text/javascript" src="../lib/moment-timezone/moment-timezone-with-data-2012-2022.min.js"></script>

デモはこちら
ソースファイルはこちら

UTCに変換する

moment().utc(); // Wed May 15 2019 15:36:59 GMT+0000

指定したタイムゾーンに変換する

moment().tz('Asia/Tokyo'); // Thu May 16 2019 00:36:41 GMT+0900

以上です。

16
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yun_bow
サービス志向エンジニアです。プログラミングを使ったモノづくりが好きです。AWS、Python、GO言語を勉強中。 こちらで投稿した記事は、所属会社の公式見解を示すものではないです。
pa-rk
Webアプリ、スマホアプリの開発を手掛ける技術者集団です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?