Javascript Jquery-Datepicker计算两个日期之间的天数

我正在使用jquery datepicker并尝试查找两个日期之间的日期。但是，根据我的数据库，有些日期是不可选择的，因此我有一些不可用的日期

我想做的是检查所选的日期范围，如果它们都可用，否则用div给出错误，然后计算天数

我已经走了这么远； 我能做的就是根据我的数据库禁用日历上的日期，如果它们被预订了。但我无法从代码范围之外的输入中获取valuedates，以便检查日期范围之间是否有预定日期

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

试试这个-

您可以在选择“收件人”时循环查看日期范围，并验证是否遇到任何预定日期。下面是代码

$("#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("");
            }
        }
    });

---

您的初始代码看起来很好，因为您正在从数据库获取预定日期，并将其标记为日历上不可用，因此用户首先不能选择这些日期

当您选择日历上的可用日期时，您将需要一个更改功能，它将存储这些日期。对于起始日期，应清除截止日期，以便重置用户选择

代码

var from, to;

$(document).on("change", "#from", function() {

// Reset the To date

  $('#to').datepicker('setDate', null);

});

$(document).on("change", "#to", function() {

// Get the dates

  from = document.getElementById('from').value;
  to   = document.getElementById('to').value;

});