moment.jsで日時の範囲指定をする方法

よくある「予約はこちら」ボタンを押した時に、

・営業時間内はaタグを使用

・営業時間外はポップアップでお知らせ

という仕組みをJSで作りたかったのですが、ネットで探してみると日時で範囲を作る記事ばかり。

・定休日は火曜日

・それ以外の日は、営業時間:9時00分〜17時30分

などの時間範囲で処理を行う場合に参考にしてみてください。

moment.jsの読み込みは割愛します。

まずは必要な数値を変数に。

var day = new Date();

var week = day.getDay(); // 曜日を取得する。定休日=火曜なら数値は3

var time = moment(); //moment.jsでボタンを押した時の時刻を取得

 

var start = moment().hours(9).minutes(00);

//9:00+ボタン押した時の秒数を変数startに代入

var start_result = time.isAfter(start);

//time(現在時刻)がstart(9:00)より大きい → true

 

var end = moment().hours(17).minutes(30);

//17:30+ボタン押した時の秒数を変数endに代入

var end_result = time.isBefore(end);

//end(17:30)よりtime(現在時刻)が小さい→true

.isAfterと.isBeforeはmoment.jsで使える比較の関数？のようなものです。

これらをif分で使用します。

$(function() {

$('a[href^="tel"]').click(function() {

//telリンクをクリックした時、以下の処理になる

if (week == 3) {

// 取得した曜日が3=火曜、つまり定休日ならここに処理を書く

} else if ( start_result && end_result ) {

//定休日以外の曜日の時に

//start_resultがtrue,end_resultもtrue

//つまりボタンを押した時刻が9:00~17:30ならここに処理を書く

} else {

//9:00~17:30以外ならここに処理を書く

}

});

});

こんな感じです。

・営業時間内はaタグを使用 → htmlの設定そのまんま

・営業時間外はポップアップでお知らせ →　クリックイベントを止めて、ポップアップの処理を柄

という具合にすると良いと思います。