如何在ASP.NET Core MVC中用Datepicker计算排除周末的天数

需求说明 #

已有两段代码：一段通过jQuery Datepicker实现可视化日历选择，但仅计算两个日期的总天数；另一段能计算排除周末的工作日数，但无日历选择功能。需要将二者结合，在ASP.NET Core MVC项目中实现带日历选择的工作日计算。

原代码展示 #

带Datepicker的日期选择与总天数计算代码

<script>
    $(function () {
        $("#date1").datepicker();
        var date1 = $("#date1")
    });
    $(function () {
        $("#date2").datepicker();
        var date2 = $("#date2")
    });
    count = 0;
    
    function Diffr() {
        date1 = new Date(date1.value);
        date2 = new Date(date2.value);
        if (date1 < date2)
        {
            var milli_seconds = date1.getTime() - date2.getTime();
        }
        else
            var milli_seconds = date2.getTime() - date1.getTime();
      
        var days = milli_seconds / (1000 * 3600 * 24);
        document.getElementById("idd").innerHTML = Math.round(Math.abs(days));
    }
</script>

<p>
    Date1 :
    <input type="text" id="date1">
</p>

<p>
    Date2 :
    <input type="text" id="date2">
</p>
<button id="sub" class="btn btn-success" onclick="Diffr()">Submit</button>
<h3 id="idd">Difference</h3>

排除周末的工作日计算代码

<script>
    function CalculateDiffr() {
        var date = document.getElementById('txt_Start').value;
        var date1 = date.split('.')[1] + "/" + date.split('.')[0] + "/" + date.split('.')[2];

        date = document.getElementById('txt_Last').value;
        var date2 = date.split('.')[1] + "/" + date.split('.')[0] + "/" + date.split('.')[2];

        var days = ['N', 'Y', 'Y', 'Y', 'Y', 'Y', 'N'];

        var d1 = new Date(date1);
        var d2 = new Date(date2);

        var busssinessday= 0;

        while (true) {

            if (d1 > d2) {
                break;
            }

            var dayName = days[d1.getDay()];

            if (dayName != "N") {
                businessday++;
            }

            d1.setDate(d1.getDate() + 1);
        }

        document.getElementById('Days').value = businessday.toString();
    }
</script>

@Html.TextBox("txt_Start", "", new { @class = "form-control" })
@Html.TextBox("txt_Last", "", new { @class = "form-control" })
@Html.TextBox("Days", "", new { @class = "form-control" })

<button onclick="CalculateDiffr()">OK</button>

整合后的解决方案代码 #

<!-- 引入jQuery和jQuery UI依赖 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

<script>
    // 初始化日期选择器，统一格式
    $(function () {
        $("#startDate").datepicker({
            dateFormat: "dd.mm.yy",
            minDate: 0 // 可选：限制仅能选择今日及以后的日期
        });
        $("#endDate").datepicker({
            dateFormat: "dd.mm.yy",
            minDate: 0
        });
    });

    // 整合工作日计算逻辑
    function calculateWorkDays() {
        // 获取输入的日期值
        var startStr = document.getElementById('startDate').value;
        var endStr = document.getElementById('endDate').value;

        // 校验日期是否为空
        if (!startStr || !endStr) {
            alert("请选择开始和结束日期");
            return;
        }

        // 转换为JS可识别的Date对象
        var startParts = startStr.split('.');
        var startDate = new Date(startParts[2], startParts[1] - 1, startParts[0]); // 月份为0基索引

        var endParts = endStr.split('.');
        var endDate = new Date(endParts[2], endParts[1] - 1, endParts[0]);

        // 校验日期顺序
        if (startDate > endDate) {
            alert("开始日期不能晚于结束日期");
            return;
        }

        var businessDayCount = 0;
        var currentDate = new Date(startDate);

        // 遍历日期，排除周末（周日=0，周六=6）
        while (currentDate <= endDate) {
            var dayOfWeek = currentDate.getDay();
            if (dayOfWeek !== 0 && dayOfWeek !== 6) {
                businessDayCount++;
            }
            currentDate.setDate(currentDate.getDate() + 1);
        }

        // 展示计算结果
        document.getElementById('workDaysResult').innerHTML = "工作日天数：" + businessDayCount;
    }
</script>

<div class="container mt-4">
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="startDate">开始日期：</label>
            @Html.TextBox("startDate", "", new { @class = "form-control" })
        </div>
        <div class="col-md-4">
            <label for="endDate">结束日期：</label>
            @Html.TextBox("endDate", "", new { @class = "form-control" })
        </div>
        <div class="col-md-4 d-flex align-items-end">
            <button onclick="calculateWorkDays()" class="btn btn-success w-100">计算工作日</button>
        </div>
    </div>
    <h3 id="workDaysResult" class="mt-3"></h3>
</div>

关键说明 #

1. 依赖保障：必须引入jQuery和jQuery UI的CSS/JS文件，否则Datepicker无法正常渲染。
2. 格式统一：Datepicker的dateFormat设置为dd.mm.yy，和日期解析逻辑保持一致，避免格式不匹配导致的Date实例错误。
3. 错误修正：修复原代码中busssinessday的拼写错误，避免运行时变量未定义问题。
4. 用户体验优化：增加日期为空、日期顺序错误的校验提示，减少无效操作。
5. 逻辑简化：直接通过getDay()返回值判断周末（0=周日，6=周六），无需额外数组映射，逻辑更直观。

内容的提问来源于stack exchange，提问作者n_stckwf