JavaScriptで簡単に日付が有効かどうかチェックする方法

Advertisement

閏年の2月の日付とか各月の31日のある・なしとか、JavaScriptで簡単に日付をチェックする方法はないもんかなぁと探していたら、Stack Overflow にありました。さすがStack Overflow。いつもお世話になってます。

素(Vanilla)のJavaScriptのDate()オブジェクト を使えばけっこう簡単にチェックできるんですね。

ただ、Stack Overflowでの説明だけでは、初心者の僕にはわかりづらいところもあったので調べたことをメモっておきます。

有効な日付かチェックする方法

まず、やり方を簡単に説明します。

Dateオブジェクトに年月日を引数で渡して日付を生成します。

var y = 2017;
var m = 12;
var d = 10;

var date = new Date(y,m-1,d);
// 月は「0」を起点とするので「-1」で調整します

ここで生成される日付の月と最初に指定した月が同じ月になっていれば日付は有効、違っていれば無効になります。

var month = date.getMonth();
if(m==month){
 var result = "有効な日付";
} else {
 var result = "無効な日付";
}

簡単ですね!

でも、これだけだといったいなぜこういう結果になるのかわかりづらいですよね。
ということで、順を追って説明します。

Dateオブジェクトとは?

たとえば、Dateオブジェクトを使うと引数を与えない場合はシステム上の日付と時刻を返してくれます。

date = new Date();
// dateの値: Sat Dec 09 2017 10:17:26 GMT+0900 (JST)

このDateオブジェクトにnew Date(year, month, day)のように複数の引数を指定すると、指定した日付を生成してくれます。

date = new Date(2017, 11, 10);
// dateの値: Sun Dec 10 2017 00:00:00 GMT+0900 (JST)

ここで注意したいのは、「11」を指定しているのに「Dec(12月)」になっているところです。月は「0」を起点とするので11だと12月になるんですね。

Dateオブジェクトに無効な日付を渡すと…

では、13月に相当する「12」を指定するとどうなるかというと…

date = new Date(2017, 12, 10);
// dateの値: Wed Jan 10 2018 00:00:00 GMT+0900 (JST)

月が1つ進んで2018年1月10日(水)が返ってきます。「無効な引数」とかエラーが出るのかと思ったら違いましたね。

これは日の部分も同じで、たとえば4月31日(4月は30日までしかない)を指定すると、以下のように5月1日が返されます。

date = new Date(2017, 3, 31);
// dateの値: Mon May 01 2017 00:00:00 GMT+0900 (JST)

この特性を使って、指定した月と返ってくる月が同じかどうか調べれば、日付が有効かどうかわかるんですね。

CodePenでデモを作ってみました

See the Pen JS Date Test by Ryo Watanabe (@rriver) on CodePen.

さいごに

これを考えついた人、頭いいですね。尊敬します。
Stack Overflowにもあるように、31日のある日とない日や閏年を一つ一つチェックする方法もありますけど、こっちの方が簡単ですね。

では、Enjoy developing!

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です