Question

我有一些选项的下拉菜单，根据选择的内容，我需要两个日期选择器（开始日期和结束日期）才能有特定的日期范围。在下面的示例中，如果选择了选项1或3，则结束日期可以是将来的任何日期。如果选择了选项2，则日期范围应为30天。

在下面的jsFiddle中，无论您首先选择哪个选项，两个日期选择器都可以正常工作。我的问题是，如果您先选择选项1或3，然后选择选项2，它不会将日期范围更改为仅30天。翻转它，首先选择选项2并且最初它工作正常但是将下拉菜单更改为选项1或3并保持30天日期范围，就像选项2仍然被选中一样。

如何在每次选择时重置日期范围，使其根据所选内容正确无误？

这个jsFiddle目前显示它是如何工作的： http://jsfiddle.net/p3J28/

这是代码，从jsFiddle复制/粘贴。

<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdatepicker" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddatepicker" />
</div>

<script>
$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 30);
                    $('#enddatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 30);
                    $('#startdatepicker').datepicker('option', 
                        { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 
                        'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 
                        'maxDate', selected);
                }
            }
        });
    }
});
</script>

此外，我确信有更简单/更好的方式，所以随时提供任何建议，因为他们非常感谢。

更新了jsFiddle http://jsfiddle.net/6AKrg/

我能够取得一些进展，但仍然无法正常工作。我现在的问题是，只有在选择了选项2之后才会重置日期范围。如果您先选择选项1或选项3，则日期范围是正确的，如果您随后选择选项2，则应调整日期范围。选择选项2后，如果切换回选项1，日期范围不会重置或选项3.任何人都有任何想法？

Answer 1

我相信我终于想出了这个。选择其他下拉选项时，正在正确重置日期范围。

工作jsFiddle： http://jsfiddle.net/KXqHc/

以下是jQuery的大部分内容：

$(function() {
    $('#startdatepicker, #enddatepicker').datepicker({
        beforeShow: customRange,
        dateFormat: "mm/dd/yy",
        firstDay: 1,
        changeFirstDay: false
    });
});

function customRange(input) {
    var min = null, // Set this to your absolute minimum date
    dateMin = min,
    dateMax = null,
    dayRange = 30; // Restrict the number of days for the date range

    if ($('#select1').val() === '2') {
        if (input.id === "startdatepicker") {
            if ($("#enddatepicker").datepicker("getDate") != null) {
                dateMax = $("#enddatepicker").datepicker("getDate");
                dateMin = $("#enddatepicker").datepicker("getDate");
                dateMin.setDate(dateMin.getDate() - dayRange);
                if (dateMin < min) { dateMin = min; }
            } else {  }
        } else if (input.id === "enddatepicker") {
            dateMin = $("#startdatepicker").datepicker('getDate');
            dateMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), 
            dateMin.getDate() + 30);
            if ($('#startdatepicker').datepicker('getDate') != null) {
                var rangeMax = new Date(dateMin.getFullYear(), dateMin.getMonth(), 
                    dateMin.getDate() + dayRange);
                if (rangeMax < dateMax) { dateMax = rangeMax; }
            }
        }
    } else if ($('#select1').val() != '2') {
        if (input.id === "startdatepicker") {
            if ($('#enddatepicker').datepicker('getDate') != null) {
                dateMin = null;
            } else {  }
        } else if (input.id === "enddatepicker") {
            dateMin = $('#startdatepicker').datepicker('getDate');
            dateMax = null;
            if ($('#startdatepicker').datepicker('getDate') != null) {
                dateMax = null;
            }
        }
    }
    return {
        minDate: dateMin,
        maxDate: dateMax
    };
}

另外，感谢@RussCam关于datepicker限制范围的帖子，其中包含2个输入文本框，可以找到here，因为它提供了一个很好的开始。不得不做一些改变来解释我的下拉控制，但非常有帮助。

Answer 2

在更改结束时刷新（http://api.jqueryui.com/datepicker/#method-refresh）应该可以做到http://jsfiddle.net/p3J28/1/

$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 5);
                    $('#enddatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 5);
                    $('#startdatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 'maxDate', selected);
                }
            }
        });

    }

    $('#startdatepicker, #enddatepicker').datepicker('refresh');
});

设置/重置jQuery Datepicker日期范围

2 个答案: