부트 스트랩 datepicker에서 몇 가지 기간을 비활성화 할 수 있습니까?

Question

symfony에서 내 프로젝트에 부트 스트랩 datepicker를 구현하고 사용자가 DB에 예약 날짜를 저장할 수 있습니다.

데이터베이스에서 날짜 격차를 사용 중지 할 수있는 가능성이 있습니까? 예를 들어, 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>