Magento 2.4.0日期字段设为今日最小值时出现NaN验证错误

问题原因 #

该错误是因为Magento的validate-date验证规则默认不会自动读取input的min属性，且你的脚本可能在表单验证初始化之后才设置min值，导致验证器无法识别合法的最小值，最终解析为NaN。

解决方案 #

1. 规范HTML结构（可选） #

给日期输入框添加id，保证与label的关联逻辑完整：

<div class="bookTime__inputs--date">
    <label for="date">Date<sup>*</sup></label>
    <input type="date" id="date" name="appointment_date" placeholder="MM-DD-YYYY" data-validate="{'required-entry': true, 'validate-date': {dateFormat: 'YYYY-MM-DD'}}">
</div>

2. 修改JavaScript代码 #

更新脚本，确保DOM加载完成后执行操作，同步更新验证规则的最小值并重新初始化表单验证：

require([
    'jquery',
    'mage/mage',
    'domReady!'
], function($) {
    // 生成符合YYYY-MM-DD格式的今日日期
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const yyyy = today.getFullYear();
    const formattedToday = `${yyyy}-${mm}-${dd}`;

    const $dateInput = $('#ask_a_specialist_form input[name="appointment_date"]');
    // 设置input的min属性
    $dateInput.attr('min', formattedToday);

    // 同步更新验证规则中的最小值参数
    const validateRules = $dateInput.data('validate');
    validateRules['validate-date'].min = formattedToday;
    $dateInput.data('validate', validateRules);

    // 重新初始化表单验证，使新规则生效
    $('#ask_a_specialist_form').mage('validation', {
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        }
    });
});

关键说明 #

• 加入domReady!依赖：确保DOM完全加载后再操作元素，避免选择器找不到目标输入框的情况。
• 同步验证规则：Magento的表单验证依赖data-validate属性中的配置，仅设置input的min属性无法让验证器识别最小值约束，必须同步更新规则里的min参数。
• 重新初始化验证：修改验证规则后，需要重新初始化表单验证组件，才能让新的约束生效。

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