メモ

memo

メモ

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();

参考URL

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桁以上表示されなくなります。

参考URL


この記事をシェアする

著者

デザイナー

森田かすみ

マークアップエンジニアからWebプロダクトのデザイナーへ転身し、現在はUI/UXデザインを勉強中。
ストレス発散方法はかっぱのイラストを描くこと。

おすすめ記事

この記事のハッシュタグに関連する記事が見つかりませんでした。

他の方法で記事を探す

2024年3月

年間カレンダーへ
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31