2015年12月4日森島

森島

【怖くないJavaScript + jQuery】new Date()で日付を動的に書きだしてみる

facebook
twitter

毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。
今日はnew Date()を使用して、日付で遊んでみましょう。

1 日時取得の基本
2 Step1：まず下準備
3 Step2:次にHTMLの準備
4 Step3:jsを書き込む

日時取得の基本

new Date()を使用すると、現在の日付時刻を取得することができます。

new Date();

1	new Date();

始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。
そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。

Step1：まず下準備

まずいつも通りの手順を踏んでいきたいと思います。
headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は date.js とします）を読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="date.js" charset="utf-8"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="date.js" charset="utf-8"></script>

Step2:次にHTMLの準備

今回は、取得した日付を挿入する先があれば大丈夫です。divタグでもpタグでもなんでもいいので、任意のIDを付与したタグを作って下さい。
例では #printDiv としますね。

<div id="printDiv"></div>

1	<div id="printDiv"></div>

Step3:jsを書き込む

読みこんだjsファイル、 date.js に処理を書いていきます。
やりたいことをピックアップして必要な部分だけ記述していって下さいね。

◆この記述は必須

これは基準となる関数なので、冒頭に書いて下さいね。

	var i = new Date();

1	var i = new Date();

◆「年」だけ取り出す

年だけ取り出したい場合はこちら。

	var myYear = i.getFullYear();

1	var myYear = i.getFullYear();

◆「月」だけ取り出す

月だけ取り出したい場合はこちら。

	var myMonth = i.getMonth();

1	var myMonth = i.getMonth();

◆「日」だけ取り出す

日だけ取り出したい場合はこちら。

	var myDate = i.getDate();

1	var myDate = i.getDate();

◆最後に必要な情報をドッキング

「+」を使用すると、取得した値や文字を繋げていくことができます。
例えば「 myYear + ‘年’ + myMonth + ‘月’ 」とすると、「2015年12月」といった風に出力されます。文字を繋げる時は「”」で囲んで下さいね。「月」の代わりに「-」や「/」にしたりもできます。

iから取りだした情報を繋げます。
text()のカッコの中に記述すると、#printDivの中にテキストとして吐き出されます。

$('#printDiv').text( myYear + '年' + myMonth + '月' + myDate '日');

1	$('#printDiv').text( myYear + '年' + myMonth + '月' + myDate '日');

「-」にしたい時はこう。

$('#printDiv').text( myYear + '-' + myMonth + '-' + myDate '-');

1	$('#printDiv').text( myYear + '-' + myMonth + '-' + myDate '-');

例として、年月日を取得したものをフルで置いておきます。

$(function(){
	var i = new Date();
	var myYear = i.getFullYear();
	var myMonth = i.getMonth();
	var myDate = i.getDate();
	
	$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');
});

$(function(){

var i = new Date();

var myYear = i.getFullYear();

var myMonth = i.getMonth();

var myDate = i.getDate();

$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');

});

詳しく説明を入れると、こう

$(function(){
	
	//Dateで今日の日時を取得してiに代入
	var i = new Date();
	
	//iから年だけ取り出す
	var myYear = i.getFullYear();

	//iから月だけ取り出す
	var myMonth = i.getMonth();
	
	//iから日付だけ取り出す
	var myDate = i.getDate();
	
	//printDivに年月日を書き出し
	$('#printDiv').text(myYear +'年'+ myMonth +'月' + myDate +'日');
	
});

$(function(){

//Dateで今日の日時を取得してiに代入