0

我有一个包含几个选项的下拉列表，根据选择的内容，我需要两个日期选择器（开始日期和结束日期）来拥有特定的日期范围。在下面的示例中，如果选择选项 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。有人有什么想法吗？

4

2 回答 2

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 个输入文本框限制范围的帖子，可以在此处找到，因为它提供了一个很好的开始。必须进行一些更改以考虑我拥有的下拉控件，但非常有帮助。

于 2013-06-24T14:35:31.003 回答
0

在更改结束时刷新（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');
});
于 2013-06-19T18:14:45.000 回答