0

I have a bootstrap datepicker in my html in form with input range. I would like to to embed both calendars of both inputs in the page and keep the input fields too. I need to have the first calendar under the input "start_date" field and the second calendar under the input "end_date" field embedded.

Someone can help me please? :(

code:

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

    });

});
4

0 回答 0