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

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

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

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

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

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

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

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

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

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

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

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

    return prm;     
};

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

// 「YYYY/MM/DD HH:mm:ss」の形でフォーマット
var 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()
{
    var 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オブジェクトを使用して、「var dt = moment();」として現在日時（システム日時）のデータを取得します。

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

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

▲目次へ戻る