javascript - datepicker-bootstrap 入力範囲埋め込み

Question

HTMLに入力範囲のあるフォームのブートストラップ日付ピッカーがあります。両方の入力の両方のカレンダーをページに埋め込み、入力フィールドも保持したいと思います。入力「start_date」フィールドの下に最初のカレンダーを、入力「end_date」フィールドの下に 2 番目のカレンダーを埋め込む必要があります。

誰かが私を助けてくれますか？:(

コード：

<form class="form-horizontal visible-lg" role="form" method="get" action="." style="margin-bottom:25%">
    <div class="text-center form-group">
        <div class="form-group">
            <div class="col-md-11">
                    <div class="input-daterange" id="datepicker">
                        <span class="add-on"> Du </span>
                        <input type="text" class="input-small datepicker" value={{start_date}} name="start_date" required/>
                        <span class="add-on"> Au </span>
                        <input type="text" class="input-small datepicker" value={{end_date}} name="end_date" required/>
                    </div>
           </div>
        </div> <!----End input search---->
        <input class="btn btn-success" style="font-family:Open Sans; background-color:green;" type="submit" value="Visualiser">
    </div>
</form>

<script>


$(function(){
    var activated_dates = {{activated_campagnes|safe}};

    $('.input-daterange').datepicker({
    format: "dd-mm-yyyy",
    //startDate: "-50d",
    endDate: "-{{diff}}",
    language: "fr",
    autoclose: true,
    //todayBtn: "linked",
    //todayHighlight: true,

    beforeShowDay: function(date){
           var formattedDate = $.fn.datepicker.DPGlobal.formatDate(date, 'yyyy-mm-dd', 'fr');
           if ($.inArray(formattedDate.toString(), activated_dates) != -1){
               return {
                  //enabled : true, 
                  classes : 'Highlighted',
                  //tooltip: "ran",
               };
           }
          return;
      }

    });

});