※こちらの記事は、プロスタ編集部が学習者の多いJavaScriptの文法記事を公開することで、皆様の学習にお役に立ちたい意図で投稿しております。
参考サイト：JavaScriptでDateオブジェクトを利用する方法とは？
今回は、JavaScriptの組み込み関数の１つ、Dateオブジェクトを使って日付を表示する方法について解説します。
簡単に言えば、「Dateオブジェクト」を利用すると日付を取得して表示させることができるようになります。詳しい使い方は下記の様になります。まずは特徴をチェックしてみましょう。
目次
1 日付を取得する
2 年・月・日を一気に取得する場合の方法
3 パラメータを細か分けて表示する方法とは？
4 おわりに
##日付を取得する
今日の日付を取得したい場合の方法
var time = new Date();
指定の日付を表示させたい場合の方法
var time = new Date('2016-10-01');
と行うと日付を取得することができます。最初に変数に入れて、それを使うことがポイントです。
##年・月・日を一気に取得する場合の方法
上記のやり方では、日付を取得してくるだけで応用がありませんでした。今回は「年や月」「曜日」「分や秒」などを取得できる方法を解説していきます。
var time = new Date('2016-10-01');
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
$('span').text(year + '年' + month +'月 ' + date + '日'
と入力することで、HTML側では下記のような表示に切り替わります。
実行結果
2016年10月01日
##パラメータを細か分けて表示する方法とは？
ここからはさらにパラメータを細かく分けて解説していきます。
| パラメータ | 範囲 |
|---|---|
| 分・秒 | 0~59 |
| 時間 | 0~23 |
| 曜日 | 0~6 |
| 日 | 1~31 |
| 月 | 0~11 |
| 年 | 西暦の下2桁 |
###年を表示させる方法
var time = new Date();var year= time.getFullYear();
※.getYear()というのもあるのですが、これは1900年から数えた数値を出力するので注意。たとえば、2016年の場合、2016-1900=116なので、116という値が出力されます。
###月を表示させる方法
var time = new Date();
var month = time.getMonth()+1;
※初期の設定で必ず「0」から始まるので、数字表記を行う場合は「＋1」を加える必要がある
###日を表示させる方法
var time = new Date();
var date= time.getDate();
###曜日を表示させる方法
var time = new Date();
var day= time.getDay();
###時を表示させる方法
var time = new Date();
var hour= time.getHours();
分を表示させる方法
var time = new Date();
var min= time.getMinutes();
秒を表示させる方法
var time = new Date();
var sec= time.getSeconds();
※今回はわかりやすいように全て変数名を「var time」としていますが、変数名は自由に設定して行って頂いて大丈夫です。
##おわりに
いかがだったでしょうか。Dateオブジェクトには似た表記のメソッドが多く、変数の中に「new Date();」等を代入することが必要です。そのため違和感を感じるなど最初のうちは「使いづらい」かもしれません。しかし、使いこなすことで年・月・日・曜日など簡単に出力することができます。ぜひ参考にしてみてください