JavaScriptのDateオブジェクトを使ったときのメモ
普段はDateオブジェクトはa-blog cmsの機能のおかげで使わないのですが、CMSのバージョンが古い案件で初めてJavaScriptのDateオブジェクトを先日使ったのでそのときのメモです。
これからもあまり使うことがなさそうで、すぐ忘れてしまいそうなので備忘録がてらブログにまとめます。
日付を取得する
今日の日付を出力したいとき
var dateAttr = new Date();
指定した日付を出力したいとき
var dateAttr = new Date('2014-10-05');
CMSで出力している日付を表示したいとき （例はdata-属性をつかったとき）
<!-- HTML -->
<span data-date="2014-10-05"></span>
//JS
var dateAttr = $('span').attr('data-date');
var date = new Date(dateAttr); //1行目で作った変数をnew Date（）に使用
たとえば、CMSのカスタムフィールドで設定している日時を、Javascriptでも使いたいときは、CMSで出力した日付の変数をHTMLのdata-属性に書きます。
<span data-date="{eventdate}"></span>
そのdata-属性を指定して値を引っ張りだすことで、Javascriptで使うことができます。
年、月、日、曜日、時、分、秒に分けて表示する
この、new Date()を、年、月、日、時、分、秒、曜日に分けて表示することもできます。
// サンプルのJavascript
var dateAttr = new Date('2014-10-05');
var year = dateAttr.getFullYear();
var month = dateAttr.getMonth()+1;
var date = dateAttr.getDate();
$('p').text(year + '年' + month +'月 ' + date + '日');
<!-- HTMLの出力結果 -->
<p>2014年10月5日</p>
年の表記
//JS
var dateAttr = new Date();
var year = dateAttr.getFullYear();
※ 「2014」などが表示される
.getYear()というのもあるのですが、これは1900年から数えた数値を出力するので注意。たとえば、2014年の場合、2014-1900=114なので、114という値が出力されます。
var year = dateAttr.getYear(); //2014年の場合、114という値が出力されます。
月の表示
数字表記したいとき
//JS
var dateAttr = new Date();
var month = dateAttr.getMonth()+1;
※ .getMonth()デフォルトが0から始まるので、数字表記のときは+1する
英語表記にしたいとき
//JS
var dateAttr = new Date();
var monthAtrr = dateAttr.getMonth() ;
var mNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var month = mNames[monthAtrr] ;
英語表記にするときは、配列を使って数字を文字に変換します。このときは、デフォルトは0から始まってほしいので、数字表記のように.getMonth()+1ではなく、.getMonth()を使用しています。
日の表示
//JS
var dateAttr = new Date();
var date = dateAttr.getDate();
曜日の表示
//JS
var dateAttr = new Date();
var day = dateAttr.getDay();
曜日をこのまま表示すると、0~6の値が出力されてしまいますので、月の英語表示のときのように配列を使います。
//JS
var dateAttr = new Date();
var dayAtrr = dateAttr.getDay() ; //1行目で作った変数を使用
var dNames = ['日', '月', '火', '水', '木', '金', '土'];
var day = dNames[dayAtrr] ; //1行目で作った変数を使用
文字を合わせて使いたいとき
たとえば曜日の場合だと、後ろに「曜日」と付け足したいときに使えます。
var day = dNames[dayAtrr] + '曜日' ;
時の表示
//JS
var dateAttr = new Date();
var hour = dateAttr.getHours();
分の表示
//JS
var dateAttr = new Date();
var min = dateAttr.getMinutes();
秒の表示
//JS
var dateAttr = new Date();
var sec = dateAttr.getSeconds();
1桁のときに先頭に0をつけたい（ゼロパディングしたい）とき
1桁のときに先頭に0をつけたいというのは、「2014年10月5日」じゃなくて、「2014年10月05日」と表示したいときのことです。0をつけて数字の桁を合わせる方法をゼロパディングといいます。
date = ('0' + date).slice(-2);
上記のコードでは、dateを月の変数に変えれば、月でも、時間でも使えます。
.slice()について
.slice()を使うと表示を制限することができます。
たとえば、10月15日だったとき、日に.slice(1)と使ったとします。
date = ('0' + date).slice(1);
この場合、10月015日と表示されるべきものが、10月15日と表示されます。.slice(2)とすれば、10月5日と表示します。
10月15日と表示されるなら、.slice(1)で良いじゃないと思うかもしれませんが、実際の日にちが10月09日だった場合、10月9日と表示されてしまいます。
ですが、.slice(-2)のように負の数を指定することで、2桁以上表示されなくなります。
