twitter-bootstrap - 1か月でdatetimepickerの範囲を制限する方法は?

Question

rangeに関する開発者の例。

例えば：

開始日が 2016 年 7 月 1 日である場合、終了日は 2016 年 8 月 1 日以降にする必要があります。

また、終了日を変更すると、1 か月の制限の開始日も変更されます。

フィールドの 1 つ (たとえば、終了フィールド) を削除すると、開始日フィールドに制限がなくなります。

Answer 1

リンクした例から始めて、必要なものを取得するために数行のコードを追加できます。

$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
  useCurrent: false //Important! See issue #1075
});

$("#datetimepicker6").on("dp.change", function (e) {
  $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
  var limit = e.date;
  if( e.date ){
    limit = e.date.add(1, 'month');
  }
  $('#datetimepicker7').data("DateTimePicker").maxDate(limit);
});

$("#datetimepicker7").on("dp.change", function (e) {
  $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
  var limit = e.date;
  if( e.date ){
    limit = e.date.subtract(1, 'month');
  }
  $('#datetimepicker6').data("DateTimePicker").minDate(limit);
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker6'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

moment を使用して、新しい日付制限を計算できます (addおよびを参照substract)。ドキュメントにあるように、dp.changeevent は新しい日付を引数として取得しfalse、日付入力フィールドをリセットすると取得されます。リセットminDateしmaxDateてパラメータとして使用falseします。