javascript - 日期处理不适用于 Internet Explorer，但适用于 Chrome 和 FF

Question

在一个 symfony 4 项目中，我有一个表单元素可以在 Chrome 和 Firefox 中工作，但不能在资源管理器中工作，我不明白为什么。渲染似乎是相同的，所以它必须是我在提交表单时处理字段的方式，但是对于我来说，它为什么不起作用也没有什么明显的。

我的实体类：

class Person
{
    /**
     * @ORM\Column(type="date", nullable=true)
     */
    private $dob;

    // ....
}

我的表格类型：

class PersonFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('dob', DateType::class, [
                'label' => 'DOB (m/d/yyyy)',
                'widget' => 'single_text',
                'format' => 'M/d/yyyy',
                'attr' => ['autocomplete' => 'off', 'class' => 'js-dob'],
                'html5' => false,
            ]);
    }
}

最后是处理表单提交的javascript：

$('.js-save-button').on('click', function() {
    // convert 2-digit years to 4-digit version in dob field
    $('.js-dob').each(function() {
        let date = new Date($(this).val());
        if (date instanceof Date && !isNaN(date)) {
            if (date > new Date()) {
                date.setFullYear(date.getFullYear() - 100);
            }
            $(this).val(date.toLocaleDateString("en-US"));
        }
    });
});

javascript 代码非常不言自明，但其想法是，如果用户输入像 1923 年 6 月 1 日这样的出生日期为“6/1/23”，那么在提交表单时这将转换为“6/1/1923”。就目前而言，在 Chrome/FF 中一切正常，但在 IE 上，我从 symfony 收到表单验证错误，并显示“此值无效”消息。不管我如何输入日期。

标签： javascriptsymfony

Answer 1

借助上面@Tushar 的评论，我跟踪了该toLocaleDateString()方法遇到的错误。这里有一篇很好的简短文章，该文章的评论中有一个解决方案，该解决方案通过问题解决。基本上，正则表达式会去除toLocaleDateString函数返回的有问题的字符串。

我修改后的 javascript 代码现在如下，可在 Chrome 和 IE 中使用（未在 FF 中测试）。

$('.js-save-button').on('click', function() {
    // convert 2-digit years to 4-digit version in dob field
    $('.js-dob').each(function() {
        let date = new Date($(this).val());

        if (date instanceof Date && !isNaN(date)) {
            if (date > new Date()) {
                date.setFullYear(date.getFullYear() - 100);
            }
            var newDate = date.toLocaleDateString("en-US")
                .replace(/[^A-Za-z 0-9 \.,\?""!@#\$%\^&\*\(\)-_=\+;:<>\/\\\|\}\{\[\]`~]*/g, '');
            $(this).val(newDate);
        }
    });
});