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