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日までしか選択出来ないように出来た。