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

【问题标题】：Jquery - Datepicker Calculating the days between two datesJquery - Datepicker 计算两个日期之间的天数
【发布时间】：2015-09-29 19:06:15
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby datepicker

【解决方案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("");
            }
        }
    });

【讨论】：

【解决方案2】：

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

当您在日历上选择 To 可用日期时，您将需要一个更改功能，它应该存储它们。对于 From 日期，您应该清除 To 日期，以便重置用户选择

代码

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;

});

【讨论】：