javascript自分用覚書

---

日時関連

日時便利関数集クラス

• 指定した分だけ日時をシフトしたDateオブジェクトを作成
• Dateオブジェクトからyyyy-mm-dd
• その日時の0時0分0秒のDateオブジェクトを取得

class DateUtil {

    // 指定した分だけ日時をシフトしたDateオブジェクトを作成
    // dt: 元時刻(Dateオブジェクト)
    // days, hours, minutes, seconds: シフト量(integer)
    // return: 新時刻(Dateオブジェクト)
    static get_shifted_Date(dt, days=0, hours=0, minutes=0, seconds=0) {
        return new Date(dt.getTime() 
            + days * 1000 * 86400 
            + hours * 1000 * 3600 
            + minutes * 1000 * 60
            + seconds * 1000
        );
    }

    // 文字列(yyyy-mm-dd)
    // dt: Dateオブジェクト
    static date_to_yyyy_mm_dd(dt, delimiter="-") {
        var yyyy = dt.getFullYear();
        var mm = ("0" + (dt.getMonth() + 1)).slice(-2);
        var dd = ("0" + dt.getDate()).slice(-2);
        return yyyy + delimiter + mm + delimiter + dd;
    }

    // 0時0分0秒のDateオブジェクトを取得
    static get_daty_start(dt) {
        return new Date(Math.floor(dt.getTime() / (86400 * 1000)) * 86400 * 1000);
    }

}

Dateオブジェクト

Dateオブジェクト作成時にそのまま数値を足すと時刻がシフトするが、作成されたDateオブジェクトに数値をそのまま足してもシフトしない

// これは1日ずれたDateオブジェクトは取得できる
x = new Date() + 86400 * 1000; 

// これはDateオブジェクトにならない
x = new Date();
x = x + 86400 * 1000; 

// これは大丈夫
x = new Date();
x = new Date(x.getTime() + 86400 * 1000); 

---

UI関連

日時範囲を選択するUI

• 各種ライブラリに依存せず(といってもjqueryには依存)
• 日付が前後が逆転しないようにしてある
• 日付を操作したときに発火するコールバックを設定可

↓ 描画イメージ

// 日付範囲UI
class DateRangeUI {

    static create(id, change, option={}) {
        /**
         * 作成
         * id: UIに与えるID, 開始には{id}-start, 終了には{id}-endと付く
         * change: 日付変化時コールバック(change(args)),
         * option = {
         *  start: 先頭の日付(Dateオブジェクト, 任意, 指定しなければ現在時刻),
         *  end: 終端の日付(Dateオブジェクト, 任意, 指定しなければ現在時刻),
         *  changeArgs: changeの引数(object, changeの引数args.dataとして取り出せる, 任意)
         * }
         * return: $("<div>")
         */

        if (!("start" in option)) option.start = new Date();
        if (!("end" in option)) option.end = new Date();
        if (!("changeArgs" in option)) option.changeArgs = undefined;

        // startが変わったとき
        function onchange_start(args) {
            // 逆転直す
            if (new Date($("#" + id + "-start").val())
                - new Date($("#" + id + "-end").val()) > 0) {
                $("#" + id + "-end").val($("#" + id + "-start").val());
            }
            change(args);
        }

        // toが変わったとき
        function onchange_to(args) {
            // 逆転直す
            if (new Date($("#" + id + "-start").val())
                - new Date($("#" + id + "-end").val()) > 0) {
                $("#" + id + "-start").val($("#" + id + "-end").val());
            }
            change(args);
        }

        return $("<div>").append(
            $("<span>").text("表示範囲"),
            $("<span>").css("margin-left", "10px").css("margin-right", "10px"),
            $("<span>").text("開始"),
            $("<span>").css("margin-right", "5px"),
            $("<input>").val(DateUtil.date_to_yyyy_mm_dd(option.start)).prop({
                "id": id + "-start",
                "type": "date",
                "name": "start"
            }).change(option.changeArgs, onchange_start),
            $("<span>").css("margin-left", "10px").css("margin-right", "10px"),
            $("<span>").text("終了"),
            $("<span>").css("margin-right", "5px"),
            $("<input>").val(DateUtil.date_to_yyyy_mm_dd(option.end)).prop({
                "id": id + "-end",
                "type": "date",
                "name": "end"
            }).change(option.changeArgs, onchange_to)
        ).css("margin", "10px").prop("id", id);

    }
}