更新 Bootstrap Date Range Datepicker 以仅允许结束日期在开始日期的会计年度内

Posted 2023-03-27

【中文标题】更新 Bootstrap Date Range Datepicker 以仅允许结束日期在开始日期的会计年度内

【英文标题】：Update Bootstrap Date Range Datepicker to only allow for end date to be within the start date's fiscal year

【发布时间】：2017-12-23 21:37:27

【问题描述】：

我想先说我对 javascript 知之甚少。

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

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

示例：

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

如果我选择了 2017 年 1 月 12 日，则 endDate 应该在 2017 年 9 月 30 日结束

如果我选择了 2017 年 9 月 30 日，那么 endDate 也应该是 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>

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

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

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

作为测试，我将上面的 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 属性。

使用这些 SO 答案中的一些组合提示：

Bootstrap datepicker change minDate/startDate from another datepicker

Print Var in JsFiddle（这主要是一个帮手，在信用到期时给予信用）

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

它目前在哪里，它的工作是限制在适当的财政年度。我只需要调整它，以便当我清除结束日期时，我可以再次将开始日期移过该点。现在，如果我确定要将开始日期移到 9 月 30 日之后（无论选择哪一年），它需要刷新

【参考方案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 块来处理重复的选项，并允许突出显示日历中所选日期范围的样式。

【讨论】：

请随时提出建议或编辑此答案。我怀疑我的代码是最干净的，因为它让我感觉有点混乱和重复。