Laravel 5.8实现日期选择器onChange自动计算请假天数

没问题，我来帮你搞定这个自动计算请假天数的需求。咱们需要调整视图和JavaScript代码，具体步骤如下：

1. 修正Blade视图的输入框ID #

首先你的视图里的日期输入框没有设置id属性，导致JavaScript里的选择器找不到元素。咱们给两个日期输入框加上对应的id，同时给天数输入框也加上id方便操作：

<div class="col-sm-4">
    <div class="form-group">
        <label>Commencement Date:<span style="color:red;">*</span></label>
        <input type="date" class="form-control" placeholder="dd/mm/yyyy" name="commencement_date" id="commencement_date" value="{{old('commencement_date')}}" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}">
    </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
        <label>Resumption Date:<span style="color:red;">*</span></label>
        <input type="date" class="form-control" placeholder="dd/mm/yyyy" name="resumption_date" id="resumption_date" value="{{old('resumption_date')}}" min="{{Carbon\Carbon::now()->firstOfYear()->format('Y-m-d')}}" max="{{Carbon\Carbon::now()->lastOfYear()->format('Y-m-d')}}">
    </div>
</div>
<div class="col-sm-4">
    <div class="form-group">
        <label>Requested Days:</label>
        <input type="number" name="no_of_days" id="no_of_days" class="form-control" value="{{old('no_of_days')}}" style="width: 100%;" disabled>
    </div>
</div>

2. 编写日期计算的JavaScript逻辑 #

接下来更新你的JavaScript代码，监听两个日期输入框的变化事件，计算它们之间的自然天数差（如果需要排除周末/节假日可以额外调整），并把结果填充到no_of_days输入框里：

<script type="text/javascript">
$(document).ready(function() {
    // 初始化日期选择器（如果用的是原生date输入，这两行可以去掉，避免重复功能）
    $('#commencement_date').datetimepicker({
        format: "YYYY-MM-DD"
    });
    $('#resumption_date').datetimepicker({
        format: "YYYY-MM-DD"
    });

    // 定义计算天数的核心函数
    function calculateLeaveDays() {
        const startDate = new Date($('#commencement_date').val());
        const endDate = new Date($('#resumption_date').val());

        // 检查日期是否有效
        if (!startDate || !endDate || isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
            $('#no_of_days').val('');
            return;
        }

        // 防止结束日期早于开始日期
        if (endDate < startDate) {
            $('#no_of_days').val('0');
            // 可选：添加错误提示
            // alert('Resumption date cannot be earlier than commencement date!');
            return;
        }

        // 计算自然天数差（包含开始当天，比如1号到2号算2天）
        const timeDiff = endDate.getTime() - startDate.getTime();
        const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;

        $('#no_of_days').val(dayDiff);
    }

    // 监听两个日期输入框的变化，实时计算天数
    $('#commencement_date').on('change', calculateLeaveDays);
    $('#resumption_date').on('change', calculateLeaveDays);
});
</script>

额外说明 #

• 如果不需要包含开始当天（比如1号到2号算1天），只需要去掉代码里的+1即可。
• 要是需要计算工作日（排除周六周日），可以在计算时循环遍历日期，跳过周末；如果还要排除法定节假日，需要维护一个节假日数组来做判断。
• 原生的type="date"输入已经自带日期选择功能，如果你没用到datetimepicker插件的额外功能，可以直接删除初始化部分的代码，减少冗余。

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