如何为DataTables Datepicker设置日期范围并解决年份显示问题

我用DataTables DateTime实现了日期范围搜索功能，基础功能正常，但需要优化日期选择的范围限制和交互体验：

• 需求：限制用户可选日期范围，优先取表格数据中的最早/最晚日期作为边界；如果无法实现，则固定为2009-2049年
• 已完成操作：通过min()和max()方法成功设置了日期范围，但遇到新问题：当设置的年份不是当前年份（比如2023年）时，日期选择弹窗不会自动定位到该年份，用户必须手动切换年份才能选择日期
• 失败尝试：尝试用minDate.display(2023,3)设置加载时默认显示的年月，却触发错误：Cannot read properties of null (reading 'setUTCFullYear')
• 临时方案：通过DOM操作强制修改日期选择器的年份显示，但存在交互bug（比如点击返回箭头会跳转到同年12月），现寻求正确的解决方法

原实现代码 #

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/v/dt/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-html5-2.4.2/date-1.5.1/r-2.5.0/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>

<html>
<body>
<div id="sales-daterange">
    <span class="header">Date Range</span><br />
    <span class="inputs">
        <input type="text" id="datefrom" name="datefrom" class="daterange" placeholder="Order Date From" /> 
        to <input type="text" id="dateto" name="dateto" class="daterange" placeholder="Order Date To" />
    </span>
</div>
<!-- DATATABLE GOES HERE, GETTING DATA FROM AJAX, NOT SHOWING THAT BIT AS IT'S WORKING FINE -->
</body>
</html>

<script>
// Create date inputs
minDate = new DateTime('#datefrom', {
    format: 'DD-MM-YYYY'
});
maxDate = new DateTime('#dateto', {
    format: 'DD-MM-YYYY'
});

// Custom filtering function which will search data in column three between two values
DataTable.ext.search.push(function (settings, data, dataIndex) {
    let min = moment($('#datefrom').val(), 'DD-MM-YYYY', true).isValid() ?
        moment($('#datefrom').val(), 'DD-MM-YYYY').format('YYYYMMDD') : "";

     let max = moment($('#dateto').val(), 'DD-MM-YYYY', true).isValid() ?
         moment($('#dateto').val(), 'DD-MM-YYYY').format('YYYYMMDD') : "";

    var date = moment( data[2], 'DD-MM-YYYY' ).format('YYYYMMDD');

    if ( max <= "" ) {
      max = "99991231";
    }

    if ( date >= min && date <= max ) {
       return true;
    }

    return false;
});
</script>

临时方案代码 #

<script>
$(".daterange").on("focus", function() {
    $(".dt-datetime-year").prev("span").text(2023);
    $(".dt-datetime-table td").removeClass("disabled");
    $(".dt-datetime-button").attr("data-year", 2023);
    $(".dt-datetime-iconRight").css("display","block");
});
</script>

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