jQuery DataTable日期范围筛选失效，报'DateTime is not defined'错误求助

错误原因 #

直接调用new DateTime(...)会报错，因为DateTime是DataTables DateTime插件的命名空间成员，正确调用应为new DataTable.DateTime(...)；但考虑到你使用的是原生HTML date输入控件，其实完全不需要依赖DateTime插件，直接读取输入框值即可，更轻量化。

修正后的完整代码 #

日期选择器HTML #

<table>
    <tbody>
        <tr>
            <td>最小日期:</td>
            <td><input type="date" id="min" name="min"></td>
        </tr>
        <tr>
            <td>最大日期:</td>
            <td><input type="date" id="max" name="max"></td>
        </tr>
    </tbody>
</table>

表格HTML #

<table class="table table-striped table-hover table table-bordered border-primary" id="myTable">
    <thead>
        <tr>
            <th>序号</th>
            <th width="20%">州/省</th>
            <th width="20%">地区</th>
            <th width="20%">日期</th>
            <th>已提交</th>
            <th>已完成</th>
            <th>未完成</th>
            <th>已驳回</th>
        </tr>
    </thead>
    <tbody id="OpeatatorDetails">
    </tbody>
</table>

jQuery代码（修正版） #

<script src="~/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    // Ajax加载表格数据（请替换为你的实际接口）
    $.ajax({
        url: '你的数据接口地址',
        type: 'GET',
        success: function(data) {
            // 渲染数据到表格tbody
            let html = '';
            data.forEach((item, index) => {
                html += `<tr>
                    <td>${index+1}</td>
                    <td>${item.province}</td>
                    <td>${item.region}</td>
                    <td>${item.date}</td>
                    <td>${item.submitted}</td>
                    <td>${item.completed}</td>
                    <td>${item.unfinished}</td>
                    <td>${item.rejected}</td>
                </tr>`;
            });
            $('#OpeatatorDetails').html(html);

            // 数据渲染完成后初始化DataTables
            const table = $('#myTable').DataTable();

            // 日期变化时触发表格重绘
            $('#min, #max').on('change', () => table.draw());
        }
    });
});

// 添加自定义筛选器
$.fn.DataTable.ext.search.push(
    function (settings, data, dataIndex) {
        const minVal = $('#min').val();
        const maxVal = $('#max').val();
        const rowDate = data[3]; // 日期列索引（第4列，从0开始计数）
        
        // 转换为Date对象用于比较
        const minDate = minVal ? new Date(minVal) : null;
        const maxDate = maxVal ? new Date(maxVal) : null;
        const currentDate = new Date(rowDate);

        // 筛选逻辑：满足任一条件则显示该行
        if (
            (minDate === null && maxDate === null) ||
            (minDate === null && currentDate <= maxDate) ||
            (minDate <= currentDate && maxDate === null) ||
            (minDate <= currentDate && currentDate <= maxDate)
        ) {
            return true;
        }
        return false;
    }
);
</script>

关键修正点 #

1. 移除冗余依赖：原生HTML date输入无需引入moment.js和dataTables.dateTime.min.js，减少不必要的插件加载。
2. 调整初始化时机：必须在Ajax数据渲染到表格后再初始化DataTables，避免无数据或筛选失效问题。
3. 简化取值逻辑：直接通过$('#min').val()读取原生输入框的标准日期格式，无需插件处理。
4. 统一日期解析：确保表格中的日期格式能被new Date()正确解析，若使用非标准格式需提前转换为yyyy-MM-dd或ISO格式。

内容的提问来源于stack exchange，提问作者MD SAQUIB RAZA