jQuery Datepicker中的多项设置

Question

在这个问题上似乎有很多有用的话题，但是我无法将它们全部结合起来。 独立运行效果很好。 但是它结合了我遇到的功能。

我有的：

1. 使用jQuery datepicker的“ from”和“ to”输入字段。
2. 用户选择“从”日期，然后“到”日期将允许基于所选日期在未来+4天进行选择。 （编辑）
3. 第三个（隐藏）字段计算两次选择之间的天数。

这是我目前所拥有的小提琴： http : //jsfiddle.net/hVnRu/

问题：

1. 如果用户在一个月内选择“从”，在另一个月内选择“到”（即：2013年8月30日-2013年9月2日），则计算字段错误。
2. “收件人”字段未考虑之前选择的字段中的minDate 4+天。

最后，这是我的代码（所有这些都在上面的小提琴中）：

$(function () {
$("#from, #to").datepicker({
    onSelect: function () {
        var from = new Date($("#from").val().split("/").reverse().join(","));
        var to = new Date($("#to").val().split("/").reverse().join(","));
        var total = ((to - from) / 2592000000);
        var rounded = Math.round(total);
        $("#totaldays").val(rounded);

    }
});
$("#from").datepicker({
    minDate: 4,
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 2,
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
    }
});
$("#to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 2,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
    }
});

});

非常感谢任何可以提供帮助的人。

Answer 1

因此，在接受我的答案之后，这里是我代码的正确版本。 要做您想要的目标基本上很简单。 如果有人选择了开始日期，则#to日期选择器中的第一天可能是将来的4天。 因此，我们使用minDate选项，并使用setDate计算新日期。 在选择了第二个日期之后，我们调用totalDays()函数，该函数将两个日期相减，得出差值并将该差值转换为天数。 如果用户首先选择了#to日期，我们也会调用totalDays()但是为了不显示负数，我们将检查是否设置了#from日期。 如果不是（或天为负数），则不显示任何值。

 $(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        minDate: 4,
        onSelect: function (selectedDate) {
            //set #to date +4 days in the future, starting from #from date
            var fromDate = new Date(selectedDate);
            var minDate  = new Date(fromDate.setDate(fromDate.getDate() + 4));

            $("#to").datepicker("option", "minDate", minDate);
        },
        onClose: function (selectedDate) {
            //alternatively call it in onSelect
            totalDays();
        }
    });
    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 2,
        minDate: 4,
        onClose: function (selectedDate) {
            //alternatively call it in onSelect
            totalDays();
        }
    });

    function totalDays() {
        //subtract the two Date objects, convert seconds to days
        var from    = $('#from').datepicker('getDate');
        var to      = $('#to').datepicker('getDate');
        var seconds = to - from;
        var days    = Math.ceil(seconds / (1000 * 3600 * 24));

        //dont fill in value if only #to has a valid
        if (days > 0 && from) {
            $('#totaldays').val(days);
        }
    }

});

jsfiddle演示