【JavaScript】JSで日付の範囲チェックを行う 範囲内かどうか/大小比較のサンプルコードあります。

Photo by Aron Visuals on Unsplash

今回はJavaScriptでの日付の範囲チェックについて、紹介していきます。１つの日付が対象の日付の範囲内かどうか、２つの日付範囲が有効かどうかをサンプルコードを交えてご紹介します。

www.it-the-best.com

日付が範囲内かどうか

JavaScriptで日付の範囲チェックを行う場合は、Dateオブジェクトを使用します。今回は、フォームのテキストエリアから１つの日付を取得した際の範囲チェックを想定して、サンプルを作成してみました。

このような日付インターフェースの値の範囲チェックです。

テキストエリア（日付インターフェース）から取得した日付が指定範囲内かどうかチェックするには、Dateオブジェクトにしてから大小を比較します。
※テキストエリアで2021年9月27日を指定した場合のサンプルコードです。テキストエリアのvalueを取得すると「”2021-09-27"」となります。

※Dateオブジェクトを作成するときの月は-1をします。（例 12月の場合「11」を指定する

let maxDate=new Date(2021,12-1,31) // 日付範囲の上限
let minDate=new Date(2021,1-1,1) // 日付範囲の下限
maxDate.getFullYear()+"年"+(maxDate.getMonth()+1)+"月"+maxDate.getDate()+"日"
// -> "2021年12月31日"
minDate.getFullYear()+"年"+(minDate.getMonth()+1)+"月"+minDate.getDate()+"日"
// -> "2021年1月1日"

let inputStrDate="2021-09-27" // テキストエリア（日付インターフェース）の値
let inputDate=new Date(inputStrDate)
inputDate.getFullYear()+"年"+(inputDate.getMonth()+1)+"月"+inputDate.getDate()+"日"
// -> "2021年9月27日"

maxDate >= inputDate && minDate <= inputDate
// -> true

このように、文字列で取得した日付をDateオブジェクトに変換してから比較することで、正確に範囲チェックを行うことができます。

下限を下回る日付を入力した場合は以下のようになります。

let inputStrDate="2020-11-01" // テキストエリア（日付インターフェース）の値
let inputDate=new Date(inputStrDate)
inputDate.getFullYear()+"年"+(inputDate.getMonth()+1)+"月"+inputDate.getDate()+"日"
// -> "2020年11月1日"

maxDate >= inputDate && minDate <= inputDate
// -> false

日付範囲が有効かどうか

次は、２つのテキストエリアを用意して日付の範囲を入力するフォームを想定したコードです。この２つの日付範囲が有効かどうかを判断するには、Dateオブジェクトに変換して大小を比較します。

let strDateFrom = "2021-04-01"
let strDateTo = "2021-09-01"

let dateFrom = new Date(strDateFrom)
let dateTo = new Date(strDateTo)
dateFrom.getFullYear()+"年"+(dateFrom.getMonth()+1)+"月"+dateFrom.getDate()+"日"
// -> "2021年4月1日"
dateTo.getFullYear()+"年"+(dateTo.getMonth()+1)+"月"+dateTo.getDate()+"日"
// -> "2021年9月1日"

dateFrom <= dateTo
// -> true

上記の入力値の場合有効であることが確認できます。以下のコードは開始日が終了日より大きい場合です。

let strDateFrom = "2021-10-01"
let strDateTo = "2021-09-01"

let dateFrom = new Date(strDateFrom)
let dateTo = new Date(strDateTo)
dateFrom.getFullYear()+"年"+(dateFrom.getMonth()+1)+"月"+dateFrom.getDate()+"日"
// -> "2021年10月1日"
dateTo.getFullYear()+"年"+(dateTo.getMonth()+1)+"月"+dateTo.getDate()+"日"
// -> "2021年9月1日"

dateFrom <= dateTo
// -> false

このように簡単に日付範囲が有効かどうか判断することができます。