Question

关于这个问题似乎有很多有用的主题，但是我无法将它们全部结合起来。独立他们运作良好。但它结合了我遇到问题的功能。

我有什么：

使用jquery datepicker的'from'和'to'输入字段。
用户选择“从”日期开始，然后“到”日期将允许根据所选日期选择+4天。（修改）
第三个隐藏字段计算选择之间的天数。

问题：

如果用户在一个月内选择'from'而在另一个月选择'to'（即：08/30/2013 - 09/02/2013），则计算字段错误。
'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

所以在接受我的答案后，我的代码是正确的版本。做你想要的事情基本上很简单。如果有人选择了开始日期，#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 demo

Jquery Datepicker中的多个设置

1 个答案: