0

In a symfony 4 project, I have a form element that works in Chrome and Firefox but not in Explorer and I can't see why. Rendering seems to be identical, so it has to be the way I'm handling the field on form submission, but again there's nothing obvious to me about why it does not work.

My entity class:

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

    // ....
}

My form type:

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,
            ]);
    }
}

and finally the javascript that processes on form submission:

$('.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"));
        }
    });
});

The javascript code is pretty self-explanatory, but the idea is that if the user enters a dob like June 1, 1923 as '6/1/23' then this would be converted to '6/1/1923' on form submission. As it stands all works fine in Chrome/FF, but on IE I get a form validation error from symfony with a message "This value is not valid." no matter how I enter the date.

enter image description here

ehymel
  • 1,360
  • 2
  • 15
  • 24
  • 1
    Its because the fomat of the date is not supported in IE. have a look here: https://stackoverflow.com/questions/13091523/javascript-invalid-date-error-in-internet-explorer – Tushar Gupta Jan 31 '19 at 01:31
  • Thanks! I assumed it was my function, but should have guessed that IE just has to be different. – ehymel Jan 31 '19 at 03:46

1 Answers1

0

Armed with the comment from @Tushar above, I tracked the error I was experiencing to the toLocaleDateString() method. There's a good short article on this here with a solution in the comments of that article that solved by problem. Bascially a regex strips out the problematic string returned by the toLocaleDateString function.

My modified javascript code is now the following, which works in Chrome and IE (not tested in 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);
        }
    });
});
ehymel
  • 1,360
  • 2
  • 15
  • 24