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

更新日 2020年1月31日

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

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

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

JavaScript関連の他の記事

よかったらこちらも合わせてどうぞ

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

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

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

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

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

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

var month = date.getMonth() + 1;
// 月は「0」を起点とするので今度は「+1」で調整します

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

上記のコードに間違いがありました！

1行目の「var month = date.getMonth();」を「var month = date.getMonth() + 1;」に修正しました。ここでも月の値の調整が必要でした。CodePenのサンプルコードではこちらの記述になっていたのですが、記事中に記載したこちらのものは間違っていました。

大変ご迷惑をおかけしました！ご指摘いただいて修正しました。わざわざご指摘いただき、本当にありがとうございました！

簡単ですね！

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

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!

更新情報

コードに間違いがあったので修正をして注記を追加しました。ご迷惑おかけしました（2020/01/31）

JavaScript関連の他の記事

よかったらこちらも合わせてどうぞ

2017年12月9日に公開され、2020年1月31日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする