JavaScript

JavaScriptで簡単！exdate.jsによる日時フォーマット表示の完全ガイド

  /

JavaScriptを活用して、ウェブページにリアルタイムで現在時刻を表示する方法は、ウェブ開発の世界では基本中の基本ともいえます。この技術は、ユーザーインターフェイスを豊かにするだけでなく、ウェブアプリケーションに動的な要素を加えることができます。今回は、exdate.jsを用いたDateオブジェクトの拡張方法と、それを使って指定フォーマットで日時を表示する方法を紹介します。この記事は、エンジニアの方はもちろんのこと、プログラミング初心者の方にもわかりやすいように構成しています。

Contents

JavaScriptによる日時表示の基礎

まずは、ウェブページ上で現在の日時を表示するための基本的な方法から見ていきましょう。JavaScriptのDateオブジェクトは、日時に関する情報を扱うための非常に強力なツールです。しかし、このままでは表示フォーマットのカスタマイズが難しいため、より柔軟な日時表示を可能にするexdate.jsの出番となります。

exdate.jsによるDateオブジェクトの拡張

exdate.jsは、jQueryのプラグインとして開発されたライブラリで、Dateオブジェクトを拡張し、日時を簡単に指定フォーマットで表示できるようにするものです。このライブラリの魅力は、複雑な日時フォーマットを簡単に扱えるようになる点にあります。

スタイルと構造

ウェブページに表示される日時の見た目を整えるために、CSSを使ってスタイリングを行います。以下のコードは、日時を表示するエリア（#now）の基本的なスタイルを定義しています。

<style>
body{
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	padding: 0;
	margin: 0;
}
h1{
	font-size:18px;
	line-height:1.6em;
	text-align:center;
	font-weight:normal;
	padding:10px 0;
}
.clWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}
#now{
	margin:0 auto;
	color:#F00;
	text-align:center;
	font-size:20px;
}
</style>

　
このスタイル定義により、日時を表示する#nowエリアが中央揃えで、赤色の文字で表示されるようになります。

JavaScriptによる動的表示

exdate.jsとjQueryを用いて、現在の日時をリアルタイムで更新し続ける処理を実装します。まずは、必要なライブラリjquery.min.js、exdate.jsファイルを読み込みます。
次に、以下のJavaScriptコードを使って、1秒ごとに現在時刻を更新し、指定したフォーマットで表示させます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="exdate.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        $('#now').html($.exDate().toChar(
            '現在 yyyy年mm月dd日hh24時mi分ss秒 です。'
        ))
    },1000)
});
</script>

　
このコードは、ページが読み込まれた後に1秒ごとに現在の日時をフォーマットして#nowエリアに表示するようにしています。

HTMLの記述

日時を指定フォーマットに出力するエリア（id=”now”）のHTML記述です。

<div class="clWrap">
    <h1>現在日時（年月日時分秒）を1秒毎にカウントアップ表示します。</h1>

	<div id="now"></div>

</div><!--/clWrap-->

exdate.jsを使ってDateオブジェクトの日時をフォーマット表示したデモページ

実際にこれらのコードを組み合わせたデモを見ることで、exdate.jsを用いた日時表示の実装方法がより明確になります。
以下のデモページでは、リアルタイムで更新される日時が、指定したフォーマットでどのように表示されるかを確認できます。
exdate.jsを使ってDateオブジェクトの日時をフォーマット表示したデモ

ソース元：Date オブジェクトを拡張する jQuery.exDate.js

ソース元：Date オブジェクトを拡張する jQuery.exDate.js

まとめ

exdate.jsを使ったDateオブジェクトの拡張方法と、指定フォーマットでの日時表示方法をご紹介しました。この方法を使えば、ウェブページ上で日時を動的に、そして魅力的に表示させることができます。プログラミングの学習を始めたばかりの方にとっても、この記事がJavaScriptのDateオブジェクトの理解を深める一助となれば幸いです。

この記事の解説はここまでとなりますが、exdate.jsの可能性はまだまだ広がることでしょう。是非とも、自分のプロジェクトで実際に試してみて、その便利さを実感してください。

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

日付フォーマット Date exdate.js 日付
関連記事