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

Stopwatch Clock Time Countdown Graphic Words

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

目次

 
1.Dateオブジェクトのデータをformat
2.Moment.jsを使用してformat

 

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など、日時フォーマットで使用するキーワードは次の通りです。

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

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です