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

您的初始代码看起来很好，因为您从数据库中获取预订日期并在日历上标记它们不可用，因此用户不应该首先选择它们。

在您应存储的日历上选择至可用日期时，您需要更改功能。对于发件人日期，您应该清除到日期，以便重置用户选择

<强>代码

kernel.img

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

2 个答案: