exdate.jsを使ってDateオブジェクトの日時を指定フォーマットに表示

exdate.jsを使ってDateオブジェクトを拡張し、日時（年月日時分秒）を指定フォーマットに表示する方法をご紹介します。

Dateオブジェクトの日時を指定フォーマットに表示するCSSの記述

※日時を指定フォーマットに出力するエリア（#now）のCSS記述です。必要に応じて変更して下さい。

<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>

exdate.jsを使ってDateオブジェクトを拡張し、日時（年月日時分秒）を指定フォーマットに表示するJavaScriptの記述

※jquery.min.js、exdate.jsファイルを読み込みます。1秒毎にカウントアップした日時を指定フォーマットエリア（#now）に出力します。

<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>

Dateオブジェクトの日時を指定フォーマットに表示するHTMLの記述

※日時を指定フォーマットに出力するエリア（id=”now”）のHTML記述です。必要に応じて変更して下さい。

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

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

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

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

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

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

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

　
JavaScriptの日付系ってクライアントPCの設定日付になるんですよね。

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

ディスプレイ広告

ディスプレイ広告