嵌入了datepicker-bootstrap输入范围

Question

我的html中有一个bootstrap datepicker，带有输入范围。 我想在页面中嵌入两个输入的日历并保留输入字段。 我需要在输入“start_date”字段下输入第一个日历，在输入“end_date”字段下嵌入第二个日历。

有人可以帮我吗？ ：（

代码：

<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;
      }

    });

});