Tweet

Pocket

bootstrap-datetimepicker.js を使ってカレンダーを表示していたんだけど、任意の月しか選択出来ないようにしたかったので、ちょっと調べてみた。

どうやら、startDate と endDate のオプションを設定すれば、その日付範囲のみ選択可能となる模様。
参考サイト：https://github.com/smalot/bootstrap-datetimepicker

ちょっとやってみたんだけど、どうも1日ズレがある。

ソースを追ったりして色々と調べてみたところ、どうやらUCT標準時での計算をしており、時差が考慮されていなかった。

なので、startDate と endDate に時差分を加算したDateオブジェクトを渡すようにして対応。
参考サイト：ねじろぐ @drillbits様 メモ：JavaScript で システム時刻から別のタイムゾーンの時刻へ変換

<script type="text/javascript">
    // DateTimePickerで該当月しか選択出来なくする為、時差を考慮したDateオブジェクトを返す
    function getTargetUTCDate(d) {
        // クライアントPCシステム時刻
        var localTime = d.getTime();
        // localTimeのタイムゾーン差分（ミリ秒）
        var localOffset = d.getTimezoneOffset() * 60000;
        // UTC時刻（ミリ秒）
        var utc = localTime + localOffset;
        // 考慮したいタイムゾーンの差分（時間）：日本の場合は-18時間
        var offset = -18.0;
        // これで目的のミリ秒がでるので
        var result = utc - (3600000 * offset);
        d = new Date(result);
        return d;
    }

    $(function() {
        // 該当月が 2013年11月の場合(Javascriptでの月の指定は-1する)
        var startdate = new Date(2013, 10, 1);
        var enddate = new Date(2013, 10, 30);
        $('#cal').datetimepicker({
            pickTime: false,
            pickSeconds: false,
            startDate: getTargetUTCDate(startdate),
            endDate: getTargetUTCDate(enddate)
        });
    });
</script>

これでちゃんと2013年11月1日～2013年11月30日までしか選択出来ないように出来た。