javascript - Jquery Datepicker中的多个设置

Question

似乎围绕这个问题有很多有用的主题，但是我不能将它们全部结合起来。独立它们运行良好。但它结合了我遇到问题的功能。

我有的：

1. 使用 jquery datepicker 的“from”和“to”输入字段。
2. 用户选择“开始”日期，然后“结束”日期将允许根据所选日期在未来 +4 天进行选择。（已编辑）
3. 第三个隐藏字段计算选择之间的天数。

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

问题：

1. 如果用户在一个月内选择“从”，而在另一个月选择“至”（即：08/30/2013 - 09/02/2013），则计算的字段是错误的。
2. 'to' 字段未考虑先前选择的字段中的 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

So after accepting my answer here is the correct version of my code. It's basically quite simple to do what you aimed for. If someone selects a starting date, the first possible day in the #to datepicker is 4 days away in the future. Therefor we use the minDate option and calculate the new date with setDate. After a second date got selected we call the totalDays() function which subtracts our two dates, resulting in the difference and convert this difference into days. If a user first selects the #to date we also call the totalDays()but to dont show negative days we check if the #from date is set. If not (or days is negative) don't display any value.

 $(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 demo