我可以在Bootstrap datepicker中禁用幾個日期範圍嗎？

Question

我在Symfony上的項目中實現了引導日期選擇器，用戶可以將保留日期保存在數據庫中。

是否存在禁用數據庫日期範圍的任何可能性？例如，我有日期範圍從22.12.2016到26.12.2016和形式31.12.2016到03.01.2017，我想在datepicker中禁用這些日期。

謝謝。

Answer 1

希望這對你有用

 <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" /> 
       <style> 
        .datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover { 
         color: rgb(255, 0, 0); 
         cursor: not-allowed; 
        } 
       </style> 
       <div class="form-group required"> 
        <label class="col-sm-2 control-label" for="datestart">Reservation Start date</label> 
        <div class="col-sm-4"> 
         <div class="start-date"> 
          <div class='input-group date' id="time-start"> 
           <input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
          </div> 
         </div> 
        </div> 
        <label class="col-sm-2 control-label" for="dateend">Reservation End date</label> 
        <div class="col-sm-4"> 
         <div class="end-date"> 
          <div class='input-group date' id="time-end"> 
           <input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
          </div> 
         </div> 
        </div> 
       </div> 

       <script type="text/javascript"> 
       // use this date formate 'MM/dd/yyyy HH:mm' 

       // start time 
       var datestart = '<?php echo $reservation_start_date; ?>'; 

       // end time 
       var dateend = '<?php echo $reservation_end_date; ?>'; 

       jQuery('#datestart').val(datestart); 
       jQuery('#dateend').val(dateend); 

       var today = new Date(); 
       jQuery('#time-start').datetimepicker({ 
       format: 'mm/dd/yyyy hh:ii', 
         autoclose: true, 
         pickerPosition: datestart, 
         maxView: 3, 
         minuteStep: 15, 
         defaultDate: datestart, 
         startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes()) 
       }).on("changeDate", function (e) { 
       jQuery('#start-time-before').html(e.date); 
       var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000))); 
       jQuery('#time-end').datetimepicker('setStartDate', TimeZoned); 
       jQuery('#time-start').datetimepicker('setDate', TimeZoned); 
       jQuery('#start-time-adjusted').html(TimeZoned); 
       }); 

       jQuery('#time-end').datetimepicker({ 
       format: 'mm/dd/yyyy hh:ii', 
         pickerPosition: dateend, 
         autoclose: true, 
         maxView: 3, 
         minuteStep: 15, 
         defaultDate: dateend, 
         startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes()) 
       }).on("changeDate", function (e) { 
       jQuery('#end-time-before').html(e.date); 
       var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000))); 
       jQuery('#time-start').datetimepicker('setEndDate', TimeZoned); 
       jQuery('#time-end').datetimepicker('setDate', TimeZoned); 
       jQuery('#end-time-adjusted').html(e.date); 
       }); 
       </script> 

       <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>