日時関連
日時便利関数集クラス
- 指定した分だけ日時をシフトした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); } }
