JavaScript

JavaScriptでの日付フォーマット: dateformat.jsを使った実践的な表示方法ガイド

  /

JavaScriptを使用する際、特定のフォーマットで日付を表示するのは一般的なニーズの一つです。多くのプログラミング言語、例えばPHPやPerlには日付をフォーマットする関数やメソッドが組み込まれていますが、JavaScriptの標準機能だけではこのような便利な機能は提供されていません。しかし、外部ライブラリを利用することでこの問題を解決できます。
今回は、dateformat.jsを使って日付を指定のフォーマットで表示する方法を詳しく見ていきましょう。

Contents

dateformat.jsライブラリの導入

まずはじめに、dateformat.jsをプロジェクトに導入する必要があります。以下のタグをHTMLの適切な場所に追加して、ライブラリを読み込みます。

<script type="text/javascript" src="dateformat.js"></script>

フォーマットされた日付を表示するHTMLの記述

次に、日付のフォーマット結果を表示するためのHTML要素を作成します。以下のコードは2つの異なるフォーマットの日付を表示するためのテキストエリアを持っています。

<div id="idDate">
    yyyy/MM/dd HH:mm:ss SSS
	<input typy="text" id="idyyyymmddhhmmsssss" value="yyyymmddhhmmsssss" size="30">

    yyyyMMdd
	<input typy="text" id="idYYMMDD" value="YYMMDD" size="30">
</div>

dateformat.jsを使った日付のフォーマット

次に、実際に日付をフォーマットするためのJavaScriptのコードを書きます。このコードは、2つの異なるフォーマットを使って現在の日付と時刻を取得し、上記で作成したテキストエリアにその結果を表示します。

<script type="text/javascript">
	//フォーマットパターン01
	var dateFormat01 = new DateFormat("yyyy/MM/dd HH:mm:ss SSS");
	//フォーマットパターン02
	var dateFormat02 = new DateFormat("yyyyMMdd");
	
	//現在に日時を取得
	var stryyyymmddhhmmsssss = dateFormat01.format(new Date());
	var strYYMMDD = dateFormat02.format(new Date());
	
	//フォーマットされた日時を出力
	document.getElementById("idyyyymmddhhmmsssss").value = stryyyymmddhhmmsssss;
	document.getElementById("idYYMMDD").value = strYYMMDD;
</script>

dateformat.js：日時、日付を指定フォーマットで表示するデモページ

具体的な動作や結果を確認したい場合は、下記のデモページを参照してください。

dateformat.js：日時、日付を指定フォーマットで表示するデモページ

ソース元：dateformat.js – 日付フォーマット変換ライブラリ

dateformat.jsは非常に便利なライブラリですが、オリジナルの情報や詳細なドキュメントは以下のリンクからアクセス可能です。

ソース元：dateformat.js – 日付フォーマット変換ライブラリ

最後に

かなり昔になりますがjQueryが出てくる前、多くのデベロッパーが日付のフォーマットに関して試行錯誤していました。しかし、dateformat.jsのようなライブラリの登場により、この問題は簡単に解決されました。上記の手順を参考にして、JavaScriptでの日付フォーマット表示を効果的に行うことができます。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

dateformat.js 日付フォーマット yyyymmdd
関連記事