WebDesign Dackel

JavaScriptで2つの時間帯が重複しているかチェック

JavaScriptで2つの時間帯が重複しているかチェック

Hatena0
Google+0
Pocket0
Feedly0

よくバックエンドでは実装をするのですが、フロントではあまり使ったことが無かったのでメモです。

いったい何がしたいのかというと、12:00~13:0012:30~13:30という2つの時間帯があったとすると、この2つの期間は時間帯が重なっているのが分かるかと思います。
これをJavaScriptで判定する、というものになります。

コードで見る事例

実際にコードへ起こした方が分かりやすいので、早速書いてみます。

// 12:00~13:00
var date1 = {
  start: new Date("2015/05/10 12:00:00"),
  end  : new Date("2015/05/10 13:00:00")
};

// 12:30~13:30
var date2 = {
  start: new Date("2015/05/10 12:30:00"),
  end  : new Date("2015/05/10 13:30:00")
};

console.log( date1.start <= date2.end && date1.end >= date2.start );
// => true

上記では結果がtrueとなり重複していることがわかりました。
試しに、date1を下記のように変更すると、時間帯が重複しないのでfalseが返ってきます。

// 13:31:00~14:31:00
var date1 = {
  start: new Date("2015/05/10 13:31:00"),
  end  : new Date("2015/05/10 14:31:00")
};

比較に使用する条件式

下記の様な条件式が成り立った場合は、2つの期間が重複している、ということになります。

期間1の開始時間 <= 期間2の終了時間 && 期間1の終了時間 >= 期間2の開始時間

関数化するとこんな感じ

上記ではインラインで書いてしまっていますが、下記のように関数化することで簡単に扱えるようになります。

/**
 * 2つの期間の重複判定
 * @param Date 期間1の開始
 * @param Date 期間1の終了
 * @param Date 期間2の開始
 * @param Date 期間2の終了
 * @return Boolean
 */
function isDatetimeOverlap(start1, end1, start2, end2){
  return start1 <= end2 && end1 >= start2;
}

それぞれの引数はDateオブジェクトを想定していて、戻り値がtrueの場合は重複していて、falseの場合は重複していない、といった具合です。

参考サイト

期間を比較する条件式については下記が大変参考になりました。