Jquery - Datepicker計算兩個日期之間的日子

Question

我正在使用jquery datepicker並試圖找到兩個日期之間的日子。但是，有些日期根據我的數據庫不能選擇，所以我有一些不可用的日期。

我想要做的是檢查選定的日期範圍，如果他們都可用（否則給div的錯誤），然後計算天數。

我已經到了這裏; 我可以做的是根據我的數據庫禁用日曆上的日期，如果他們被預訂。但是我無法從代碼的範圍之外獲得值（輸入日期），以便我可以檢查日期範圍之間是否有任何預訂日期。

<div class="row"> 
    <!-- Date Picker--> 
    <label for="from">From</label> 
    <input type="text" id="from" name="from"> 
    <label for="to">to</label> 
    <input type="text" id="to" name="to"> 
    <!-- /.Date Picker --> 
    <div id="combined-dates" style="display:none;">Please select unbooked range..</div> 
</div> 
</div> 
<script> 
    $(function() { 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      url: "/houses/<%= @house.id %>", 
      success: function(schedules) { 

       var length = Object.keys(schedules).length 


       var array = [] 
       for (var i = 0; i < length; i++) { 

        if (schedules[i].status = " booked ") { 
         array.push(schedules[i].date) 

        } 

       } 


       $("#from").datepicker({ 
        defaultDate: "+1w", 
        changeMonth: true, 
        numberOfMonths: 1, 
        dateFormat: "dd/mm/yy", 
        onClose: function(selectedDate) { 
         $("#to").datepicker("option", "minDate", selectedDate); 
         //var selected1 = selectedDate.split("/") 
         //console.log(selected1) 
        }, 
        beforeShowDay: function(date) { 
         var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
         return [array.indexOf(string) == -1] 
        } 
       }); 
       $("#to").datepicker({ 
        defaultDate: "+1w", 
        changeMonth: true, 
        numberOfMonths: 1, 
        dateFormat: "dd/mm/yy", 
        onClose: function(selectedDate) { 
         $("#from").datepicker("option", "maxDate", selectedDate); 
         //var selected2 = selectedDate.split("/") 
         //console.log(selected2) 
        }, 
        beforeShowDay: function(date) { 
         var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
         return [array.indexOf(string) == -1] 

        } 
       }); 
       //Non of them works!! 
       //var d = $('#from').datepicker().val(); 
       //var d = $('#from').datepicker('getDate').val(); 
       //console.log(d); 
      } 
     }); 


    }); 
</script> 

Answer 1

試試這個 - Fiddle Demo

您可以通過在特定的to和驗證的日期範圍內循環，如果遇到任何預訂的日期。以下是代碼。因爲你是從數據庫中獲取的預約日期以及將它們標記在日曆上不可用，因此用戶不應該能夠選擇他們在首位

$("#to").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1, 
     dateFormat: "dd/mm/yy", 
     beforeShowDay: function (date) { 
      var string = jQuery.datepicker.formatDate('yy-mm-dd', date); 
      return [array.indexOf(string) == -1]; 

     }, 
     onSelect: function (date) { 
      var isValid = true; 

      var fromDate = $("#from").datepicker('getDate'); 
      var toDate = $("#to").datepicker('getDate'); 
      var bookeDates = []; 
      for (var d = new Date(fromDate); d <= toDate; d.setDate(d.getDate() + 1)) { 
       if (array.indexOf(jQuery.datepicker.formatDate('yy-mm-dd', d)) > -1) { 
        isValid = false; 
        bookeDates.push(jQuery.datepicker.formatDate('yy-mm-dd', d)); 
       } 
      } 
      if (!isValid) { 
       alert('Dates ' + bookeDates.toString() + ' within selected range are already booked'); 
       $("#to").val(""); 
      } 
     } 
    }); 

Answer 2

您最初的代碼看起來不錯。

當您選擇至時，您需要更改功能才能在日曆上存儲它們。對於從日期應該清除所以它重置用戶選擇

守則要日期

​​3210