2018.11.29

JavaScriptで今日の日付を取得して表示する(サンプルコードあり)

サイト上に、今日の日付や、時間を表示させたいときがありますよね。

そんなときは、JavaScriptのDate()を使いましょう。

とりあえず出力してみる

とりあえず以下のjsを用意してブラウザで見てみましょう。

var now = new Date(); //インスタンスを生成
console.log(now); //そのままnow-timeクラスに表示

出力結果

Thu Nov 29 2018 14:54:31 GMT+0900 (日本標準時)

色々な文字の羅列が出てきました。
なんとなく日付っぽいのは分かりますが、
これはさすがに、そのままだと扱いづらすぎますよね

せっかくなので、12:30とか2018年12月25(火)みたいな見やすい表示にしてみましょう。

ちなみに、僕はクリスマスに予定はありません。(聞いてない)

Dateオブジェクトを使いやすいように改善して活用しよう

Dateオブジェクトを使えば、年や月や日を、個別に取り出すことができます。
個別に取り出したあとに組み合わせれば、思い通りのフォーマットで出力できます。

以下に、使用例を載せておきます。
そのまま使ってもいいですし、使いやすいようにアレンジしてみてください。

var today = new Date(); //インスタンスを生成
var week_array = ["日", "月", "火", "水", "木", "金", "土"]; //曜日の配列を用意

//dateObjという名前のオブジェクトを作成
var dateObj = {

	year: today.getFullYear(), //年
	month: today.getMonth() + 1, //月
	day: today.getDate(), //日
	week: week_array[today.getDay()], //曜日
	hours: today.getHours(), //時
	minutes: today.getMinutes(), //分
	seconds: today.getSeconds(), //秒

	//出力のフォーマットを定義
	getDate: function(){
		var display_format = this.year + '/' + this.month + '/' + this.day + '(' + this.week + ')';
		return display_format;
	}
}

//コンソールに出力
console.log(dateObj.getDate());

出力結果

2018/11/29(木)

スラッシュで区切られ、曜日は括弧書きになり、
とても見やすい感じになりましたね！

自作したdateObjを使って自由自在に現在時刻を表示する

今回は使いやすいように自作したdateObjを使い、
簡単に使い方を説明します。

個別に取得したい場合

年や月など、個別に取得したい場合、
たとえば今年を取得したい場合は、
dateObj.yearのようにdateObjの後に.をつけて取得したいプロパティ名を付けてください。
月を取得したければdateObj.month
日を取得したければdateObj.day
のような感じですね。

自分でフォーマットを決めてまとめて取得したい場合

個別に値を取得できるということは、
組み合わせれば自由に表示させることができます。

プログラムの下記の関数に注目してください

//出力のフォーマットを定義
getDate: function(){
	var display_format = this.year + '/' + this.month + '/' + this.day + '(' + this.week + ')';
	return display_format;
}

今はthisの説明などは省きますが、年を入れたい箇所にはthis.year
月を入れたい場所にはthis.monthを記述しています。
'/'は区切り文字のスラッシュです。
'('と')'は曜日を入れるためのカッコです。
このように、個別に取得した日付と文字列を+で繋げていき、最終的に出力することができるのです。

たとえば、「12:34」みたいに現在時刻を：区切りで表したいときは、

var display_format = this.hours + ':' + this.minutes;

とすれば良いですし、

2018年12月25日みたいに漢字で表現したければ、

var display_format = this.year + '年' + this.month + '月' + this.day + '日';

とすればいいわけです。

フォーマットを自分で決めれば、あとは、
dateObj.getDate()関数を呼び出せば表示できます。

ぜひ、自分でいじってみて表示を変えてみてください！