javascript - 更新 Bootstrap 日期范围日期选择器以仅允许结束日期在开始日期的会计年度内

Question

我想在序言中说我对 JavaScript 知之甚少。

我有一个 Bootstrap 日期选择器，使用从 eternicode 获取的日期范围。

我的目标是在 startDate 中选择一天，然后让 endDate 可用的天数仅在 startDate 当天或之后且在 startDate 的财政年度内。

示例:

• 如果我选择 2016 年 10 月 1 日，结束日期应在 2017 年 9 月 30 日结束

• 如果我选择 2017 年 1 月 12 日，结束日期应在 2017 年 9 月 30 日结束

• 如果我选择 2017 年 9 月 30 日，结束日期也应该是 2017 年 9 月 30 日

• 差不多，如果 startDate 月份在 [Oct、Nov、Dec] 中，则 endDate 上限为 9 月 30 日(startDate 年 + 1)，其他 endDate 上限 9 月 30 日发布(开始日期年份)

在我的 reportWebpage.cshtml 文件中，我有:

<div class="col-md-2">
    Date Range:
</div>
<div class="col-md-5" id="dateRangeContainer">
    <div class="input-daterange input-group" id="datepicker">
        @Html.TextBox("startDate", "", new { @class = "input-sm form-control", name= "startDate" })
        <span class="input-group-addon">to</span>
        @Html.TextBox("endDate", "", new { @class = "input-sm form-control", name = "endDate" })
    </div>
</div>

在我的 lated.js 中，我有一个非常基本的日期选择器设置:

$(function () {
    $('#dateRangeContainer .input-daterange').datepicker({
        autoclose: true,
        todayBtn: "linked",
        clearBtn: true
    });
});

我知道我可以设置一个 dateDisable 属性，虽然它的功能正是我想要的，但它似乎基于日期数组，这在这里似乎是错误的想法。

作为测试，我将上面的 datapicker js 代码替换为下面所示的代码。

就像在这个 SO Answer 中一样，我尝试将 onSelect 属性添加到 #startDate 日期选择器中，但我没有从嵌入的警报中得到响应，也没有得到响应Google Chrome 的开发工具是否命中了其上的调试点:

$('#startDate').datepicker({
    onSelect: function() {
        var date = $(this).datepicker('getDate'),
            day = date.getDate(),
            month = date.getMonth() + 1, // Offset the zero index to match normal month indexes
            year = date.getFullYear();
        alert(day + '-' + month + '-' + year);
    }
});

我希望通过这样做，我至少可以开始构建一些 if else 循环或其他东西。

我正在努力弄清楚如何开始解决这个问题，因此我们将非常感谢任何帮助或建议!

编辑1: 我发现尝试禁用大范围的日期是查看此问题的错误方法，我应该专注于利用 setStartDate 和 setEndDate 属性。

使用这些答案中的一些组合技巧:

• Bootstrap datepicker change minDate/startDate from another datepicker

• Print Var in JsFiddle(这主要只是一个帮助者，在应得的地方给予赞扬)

我将这个 JSFiddle 混在一起:http://jsfiddle.net/wsodjsyv/203/

目前的情况是，它的作用是限制正确的财政年度。我只需要调整它，以便当我清除结束日期时，我能够再次将开始日期移过该点。现在，如果我确定要将开始日期移至 9 月 30 日之后(无论选择哪一年)，则需要刷新

Answer 1

这是我与日期选择器相关的新 related.js 文件；使用此代码，我可以将日期范围限制为开始日期的会计年度:

$(function () {
    // Ranged datepickers
    $('#dateRangeContainer .input-daterange').datepicker({
        autoclose: true,
        todayBtn: "linked",
        clearBtn: true
    });

    $('#startDate').datepicker().on('changeDate', function(selected) {
        var endDate_Bottom = null;
        var endDate_Cap = null;

        if (selected.date != null) {
            endDate_Bottom = new Date(selected.date.valueOf());
            endDate_Cap = new Date(selected.date.valueOf());

            if (endDate_Bottom.getMonth() >= 9 && endDate_Bottom.getMonth() <= 11) {
                endDate_Cap = new Date(endDate_Bottom.getFullYear() + 1, 8, 30);
            } else {
                endDate_Cap = new Date(endDate_Bottom.getFullYear(), 8, 30);
            }
        }

        $('#endDate').datepicker('setStartDate', endDate_Bottom);
        $('#endDate').datepicker('setEndDate', endDate_Cap);
    });

    $("#endDate").datepicker().on('changeDate', function(selected) {
        var startDate_Cap = null;
        if (selected.date != null) {
            startDate_Cap = new Date(selected.date.valueOf());
        }
        $('#startDate').datepicker('setEndDate', startDate_Cap);
    }).on('clearDate', function(selected) {
        var startDate_Cap = null;
        $('#startDate').datepicker('setEndDate', startDate_Cap);
    });
});

我添加了一些日期何时为空的检查，以避免在空日期调用 .valueOf() 时控制台日志充满错误。

我还带回了 dateRangeContainer block 来处理重复选项并允许突出显示日历中所选日期范围的样式。