JavaScript【 Date 】3 ～ 日付と時間のフォーマット

JavaScriptのDateオブジェクトで取得した日時データを表示する際には、通常、必要な形にフォーマットして使用します。
今回は、日付と時間のフォーマットについて紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. Dateオブジェクトのデータをformat

　
Dateオブジェクトを使用して日時データを取得した後、必要な形にフォーマットする場合は、通常、次のように文字列を連結して行います。

// 現在日時（システム日時）を取得
let dt = new Date();

// 「YYYY年MM月DD日 HH時mm分ss秒」の形でフォーマット
let str = dt.getFullYear() + "年"
            + (dt.getMonth() + 1) + "月"
            + dt.getDate() + "日　"
            + dt.getHours() + "時"
            + dt.getMinutes() + "分"
            + dt.getSeconds() + "秒";

上記の変数 str を出力すると、次のように表示されます。

　
上記のような日本語表示だとあまり問題はありませんが、時間を「HH:mm:ss」のようにフォーマットする場合など、1桁の数字をそのまま表示すると不自然な印象がある場合は、0埋めの処理をします。

次のような判別式を使って、0埋め処理を行います。

// 1桁の数字を0埋めで2桁にする関数
let fm = function(prm) {

    // 数値prmを文字列として扱うための処理
    prm += "";

    // prmが1文字の場合は、左を 0 埋めする
    if (prm.length == 1) {
        prm = "0" + prm;
    }

    return prm;     
};

// 「2017年11月2日 4時5分9秒」の日時データを設定
let dt = new Date("2017,11,2 4:5:9");

// 「YYYY/MM/DD HH:mm:ss」の形でフォーマット
let str = dt.getFullYear() + "/"
            + fm(dt.getMonth() + 1) + "/"
            + fm(dt.getDate()) + "　"
            + fm(dt.getHours()) + ":"
            + fm(dt.getMinutes()) + ":"
            + fm(dt.getSeconds());

0埋め処理が必要な項目が複数あるので、0埋め処理前の数字を受け取って0埋め処理後の数字を返す関数「 fm 」を作って、0埋め処理が必要な項目毎に関数「 fm 」を呼び出しています。

上記の変数 str を出力すると、「2017年11月2日 4時5分9秒」が次のように表示されます。

▲目次へ戻る

2. Moment.jsを使用してformat

　
Moment.jsは、日付と時間のフォーマットを行う際に便利に利用できる JavaScriptのライブラリです。

Moment.jsを使用する場合は、ライブラリ（jsファイル）を読み込む必要があります。

ライブラリは、Moment.jsのサイトからダウンロードした上で、jsファイルを格納するディレクトリに配置するか、CDNJS.comで配信されているライブラリのパスを指定するか、どちらかで読み込みます。

//ダウンロードする場合
<script src="moment.js"></script>
 
//CDNJS経由でパスを指定する場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.js"></script>

jsファイルは、Moment.jsのサイトからダウンロードした上でそのアドレスを指定するか、Web上のjsファイルのURLを指定するか、どちらかの方法で読み込みます。

moment.jsを読み込んだ後は、Momentオブジェクトを使用して日時のフォーマット処理を行うことができます。

ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.js"></script>
<script type="text/javascript">
function dispDate()
{
    let dt = moment();
    document.getElementById("dat1").value += dt.format("YYYY/MM/DD"); 
    document.getElementById("dat2").value += dt.format("YYYY年MM月DD日"); 
    document.getElementById("dat3").value += dt.format("YYYY-MM-DD HH:mm"); 
    document.getElementById("dat4").value += dt.format("YYYY-MM-DD HH:mm Z"); 
}
</script>

<div style="background-color : #CCC; padding : 20px 10px 1px;">
    <form>
        <input type="button" value="現在日時をフォーマット" onClick="dispDate()">　
　
        <input type="text" id="dat1" value="　　　　　YYYY/MM/DD　：　">
        <input type="text" id="dat2" value="　　　YYYY年MM月DD日　：　">
        <input type="text" id="dat3" value="　YYYY-MM-DD　HH:mm　：　">
        <input type="text" id="dat4" value="YYYY-MM-DD　HH:mm Z　：　">
    </form>
</div>

Dateオブジェクトの代わりにMomentオブジェクトを使用して、「let dt = moment();」として現在日時（システム日時）のデータを取得します。

そして、「dt.format(“YYYY/MM/DD”);」のような形でフォーマットを指定します。

YYYYやMMなど、日時フォーマットで使用するキーワードは次の通りです。

YYYY	4桁の年（ex.2017）
YY	2桁の年（ex.17）
Q	年の四半期（1～4）
M	月（1～12）
MM
MMM	月名（Jan～December）
MMMM
D	日（1～31）
DD
Do	日（1st～31st）
DDD	日（1～365）
DDDD
X	UNIXタイムスタンプ（秒）9
x	UNIXタイムスタンプ（ミリ秒）
H	時（0～23）
HH
h	時（1～12）
hh
K	時（1～24）
KK
a	午前午後（am、pm）
A
m	分（0～59）
mm
s	秒（0～59）
ss
S	ミリ秒（0～999）
SS
SSS
Z	協定世界時との偏差（+-HH:mm、+-HHmm、Z）
ZZ

▲目次へ戻る