PrimeReact DataTable日期筛选异常：手动输入无响应问题求助

问题描述 #

在使用PrimeReact DataTable的日期筛选功能时，遇到以下情况：

• 通过日历面板选择日期可正常触发筛选；
• 手动在输入框输入日期时无响应，此时options.value为空；
• 需求：同时支持日历选择和手动输入两种筛选方式，且需保持filterdisplay="row"。

原代码示例 #

const dateFilterTemplate = (options) =>
{
    return <Calendar
        value={options.value} 👈 手动输入时此处为空
        onChange={(e) =>
        {
            if (e.value !== null)
            {
                options.filterApplyCallback(e.value, options.index)
            }
        }}
        dateFormat="dd/mm/yy"
        placeholder="dd-mm-jjjj"
        mask="99/99/9999"
    />
};

解决方案（问题已解决） #

核心问题在于手动输入时options.value未及时同步，导致筛选回调无法获取有效日期值。通过以下修改实现两种输入方式的支持：

修改后的代码 #

const dateFilterTemplate = (options) => {
    // 用本地状态跟踪筛选值，避免依赖options.value的延迟更新
    const [filterValue, setFilterValue] = useState(options.value);

    const handleFilter = (date) => {
        setFilterValue(date);
        if (date) {
            options.filterApplyCallback(date, options.index);
        }
    };

    return (
        <Calendar
            value={filterValue}
            onChange={(e) => handleFilter(e.value)}
            dateFormat="dd/mm/yy"
            placeholder="dd-mm-jjjj"
            mask="99/99/9999"
            // 监听手动输入事件，解析有效日期并触发筛选
            onInput={(e) => {
                const input = e.target.value.trim();
                if (/^\d{2}\/\d{2}\/\d{4}$/.test(input)) {
                    const [day, month, year] = input.split('/');
                    const validDate = new Date(year, month - 1, day);
                    if (!isNaN(validDate.getTime())) {
                        handleFilter(validDate);
                    }
                }
            }}
        />
    );
};

关键优化点 #

1. 本地状态绑定：使用useState维护筛选值，确保日历选择和手动输入的结果实时同步；
2. 手动输入处理：通过onInput事件监听输入内容，验证格式后转换为合法Date对象，触发筛选回调；
3. 值校验：添加日期有效性检查，避免无效输入触发错误筛选。

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