Jquery

Question

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

我想做的是检查所选的日期范围是否可用（否则会出现 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 的 select 的日期范围，并验证是否遇到任何预订日期。下面是代码。

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

您的初始代码看起来不错，因为您从数据库中获取预订日期并在日历上将它们标记为不可用，因此用户一开始就不能选择它们。

您需要一个更改功能，因为您 select 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;

});

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

Jquery - Datepicker Calculating the days between two dates

javascript

ruby

ruby-on-rails

datepicker