営業時間外を表示するjavascriptサンプル

営業時間外の場合に、メッセージを表示するプログラムです。

<!-- This file is using the UTF-8 encoding. -->
<!-- コピーするコード ここから↓↓ -->
<span id="calculatorjpBusinessHour"></span>
<script>
    // デバッグのとき、日時指定する。
    //var debugTime = '2019-03-21T14:24:00';

    // 表示する文言を指定する。
    var beforeMessage = '営業開始は10時です。問い合わせへの回答は10時~となります。';
    var openMessage = '';
    var closedMessage = '本日の営業は終了しました。問い合わせへの回答は、翌営業日以降になります。';
    var holidayMessage = '本日は休業日です。問い合わせへの回答は、翌営業日以降になります。';

    // 営業時間を指定する。例: 9:30
    var openTime = '10:00';
    var closeTime = '18:00';

    // 営業日を指定する。例: 月火水木金
    var businessDay = '月火水木金';

    // 祝日を指定する。
    //var holidayList = {}; // 祝日が休みでない場合は空にする
    var holidayList = {
        "2019-01-01": "元日",
        "2019-01-14": "成人の日",
        "2019-02-11": "建国記念の日",
        "2019-03-21": "春分の日",
        "2019-04-29": "昭和の日",
        "2019-04-30": "祝日",
        "2019-05-01": "天皇の即位の日",
        "2019-05-02": "祝日",
        "2019-05-03": "憲法記念日",
        "2019-05-04": "みどりの日",
        "2019-05-05": "こどもの日",
        "2019-05-06": "振替休日",
        "2019-07-15": "海の日",
        "2019-08-11": "山の日",
        "2019-08-12": "振替休日",
        "2019-09-16": "敬老の日",
        "2019-09-23": "秋分の日",
        "2019-10-14": "体育の日",
        "2019-10-22": "即位礼正殿の儀の行われる日",
        "2019-11-03": "文化の日",
        "2019-11-04": "振替休日",
        "2019-11-23": "勤労感謝の日"
    };
</script>
<script>
    // デバッグ時にdebugTimeが指定可能
    if(typeof debugTime != "undefined"){
        var now = new Date(debugTime);
    }else{
        var now = new Date();
    }
    function isHoliday(now, businessDay, holidayList){
        var holidayFlag = false;

        // 営業日に入っていない曜日は休みと判定する
        if(typeof businessDay == "undefined"){
            console.log("businessDay: invalid");
        } else {
            var weekValue = now.getDay();
            switch (weekValue) {
                case 0:
                    if (businessDay.indexOf('日') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 1:
                    if (businessDay.indexOf('月') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 2:
                    if (businessDay.indexOf('火') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 3:
                    if (businessDay.indexOf('水') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 4:
                    if (businessDay.indexOf('木') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 5:
                    if (businessDay.indexOf('金') == -1) {
                        holidayFlag = true;
                    }
                    break;
                case 6:
                    if (businessDay.indexOf('土') == -1) {
                        holidayFlag = true;
                    }
            }
        }

        // 祝日に記載されていれば休みと判定する
        // 2019-1-1 または 2019/1/1
        var day_slash = now.toLocaleDateString('ja-JP',options);
        var day_hyphen = day_slash.replace('/','-').replace('/','-'); // /を-に置き換える。2つ出てくるので、2回処理する
        var options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        // 2019-01-01 または 2019/01/01
        var day_slash_2 = now.toLocaleDateString('ja-JP',options);
        var day_hyphen_2 = day_slash_2.replace('/','-').replace('/','-'); // /を-に置き換える。2つ出てくるので、2回処理する
        if(typeof holidayList == "undefined"){
            console.log("holidayList: invalid");
        } else if (holidayList[day_slash] || holidayList[day_hyphen] || holidayList[day_slash_2] || holidayList[day_hyphen_2]) {
            holidayFlag = true;
        }
        return holidayFlag;
    }

    function str2Min(str) {
        var minutes = 0;
        var strs = str.split(':');
        minutes += parseInt(strs[0]) * 60;
        if (strs[1]) {
            minutes += parseInt(strs[1]);
        } else {
            console.log("str2Min: maybe invalid");
        }
        return minutes;
    }

    //メインの処理
    var output = '';
    if (isHoliday(now, businessDay, holidayList)) {
        output = holidayMessage;
    } else {
        var nowMinutes = str2Min(now.getHours() + ':' + now.getMinutes());
        var openMinutes = str2Min(openTime);
        var closeMinutes = str2Min(closeTime);
        if(nowMinutes < openMinutes) {
            output = beforeMessage;
        } else if (nowMinutes <= closeMinutes) {
            output = openMessage;
        } else {
            output = closedMessage;
        }
    }
    document.getElementById("calculatorjpBusinessHour").innerText = output;
</script>
<!-- コピーするコード ここまで↑↑ -->

※注意点

ファイルダウンロード

こちらのファイルはオープンソース(MIT)で公開しています。↓よりダウンロードいただけます。

コード生成フォーム

メッセージ、営業日、営業時間を入力したらコード生成するフォームを作りました。

営業時間前のメッセージ
営業時間中のメッセージ
営業時間後のメッセージ
休業日のメッセージ
営業日
                    
営業開始
営業終了
祝日

タグ:   javascript   ビジネス