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