Forms with date fields broken in MacOS Safari and Internet Explorer 10 & 11

[TFAstudio]

Unless there's been a fix recently, we've got a problem with Date fields.

If we include a Date field in a form (non-mandatory) in MacOS (desktop) Safari 12.1.1 & 12.0.3 and Internet Explorer 10 & 11, the form will submit if you leave the field empty, but if you try and fill it out (with anything at all), you are unable to submit the form. There is no error, so the user experience is very poor. In these browsers Date fields load without the cute date picker tools/interfaces.

An older Formulate example at https://scoutsvictoria.com.au/about-us/campsites/cresco-park/ has the problem, but also new Formulate versions we've tested, on sites still in development.

Ps. The form works fine in Safari on iOS (iPhone), Chrome, Firefox & IE Edge.

Cheers,
AE

[Nicholas-Westby]

Thanks for the report.

Is this for the Angular and the plain JavaScript templates?

I'll take a look when I get a chance. Part of the issue may be the format the date is entered, but I'm not 100% sure about that. If so, you can construct a regex validation with a message that indicates the exact format required. Not ideal, but might work in a pinch.

FYI, what we typically do is replace the built-in date field with a custom date picker. Since the type of date picker you might want to use varies for different builds, we don't include a custom one with Formulate by default. Though I have no personal experience with them, here are a couple you might consider:

• https://github.com/flatpickr/flatpickr
• https://github.com/qodesmith/datepicker

[Nicholas-Westby]

I just did a test in desktop Safari and confirmed that you indeed do not get a date picker (for anybody else who comes across this issue, you can see browser support at https://caniuse.com/#feat=input-datetime). However, the form submitted fine when I used this text: "2019-07-10"

So it seems the expected format is yyyy-mm-dd. If you create a regex validation for that, that might be an OK workaround for a while.

This was with the latest version of the plain JavaScript template.

[TFAstudio]

Regex validation doesn't work for these fields. I've tried a bunch of patterns and nothing seems to work as it should. We'll likely be reverting to plain text and regex (which does work on plain text fields) to overcome this issue ASAP.
(Responsive config used over here.)

[TFAstudio]

I wonder if a polyfill would help.... https://www.npmjs.com/package/date-input-polyfill

[TFAstudio]

The above polyfill does seem to help (JS file needs to be in Body tag).
It even insists on a "picked" date if you edit to make day or month a single digit and submit.
Have only tested IE11 so far.

Regex would still be nice to show a real error. But I can't get it to work properly on these fields.
I've given it lot's of scenarios, but selected dates don't pass any of them.

Empty
$|

YYYY-MM-DD
((?:20)\d{2})-\d{2}-\d{2}$

YYYY/MM/DD
((?:20)\d{2})\/\d{2}\/\d{2}$

DD/MM/YYYY
\d{2}\/\d{2}\/((?:20)\d{2})$

DD-MM-YYYY
\d{2}-\d{2}-((?:20)\d{2})$

Month DD, YYYY
\w{3,9}?\s\d{2}?,\s((?:20)\d{2})?

Together
^$|((?:20)\d{2})-\d{2}-\d{2}$|((?:20)\d{2})\/\d{2}\/\d{2}$|\d{2}\/\d{2}\/((?:20)\d{2})$|\d{2}-\d{2}-((?:20)\d{2})$|\w{3,9}?\s\d{2}?,\s((?:20)\d{2})?$

Maybe space delimiters would work...

[TFAstudio]

We've launched the polyfill (https://github.com/jcgertig/date-input-polyfill) and believe this fixes the problem in the above mentioned browsers.
It would be nice if these compatibility limitations were baked in as warnings for Formulate users who choose fields that are dysfunctional in older browsers.

[Nicholas-Westby]

Thanks for the tip. I will see if I can tinker with it a bit myself, then update the documentation page to include a note about including the date polyfill.

I'm thinking this page would be a good spot to put it: http://www.formulate.rocks/plain-javascript/render-form

[TFAstudio]

This is a universal problem, so it should also appear on the http://www.formulate.rocks/render-form (AnjularJS Responsive template) page.

[Nicholas-Westby]

I'm not really doing much with the AngularJS template nowadays, but if you want to submit a pull request for that I'll go ahead and merge it in.

[TFAstudio]

The Formulate.Rocks website's getting started info links "Render Form" directly to the AngularJS instructions, with a deeper link to Plain JavaScript instructions if that's how you roll. We assumed the AngularJS method was the default and preferred. We've only ever used the AngularJS template.

Should we be jumping ship on AngularJS for future builds? What are the advantages?

[Nicholas-Westby]

This has some info on that: https://code101.net/code-101/umbraco-formulate-2-plain-javascript-edition

[FuelAgency]

Just a little heads up, we've started using the Responsive Plain JS template for some form instances in Umbraco v7 (with the latest v7 Formulate release). It seems this configuration also has issues with using the Date Field with the entire form failing to render in IE11 when a date field is included in the form. The console just shows an Invalid Argument error.

[Nicholas-Westby]

Thanks for pointing out the issue regarding setting fieldElement.type = options.type for date fields in IE11, @FuelAgency. This has been fixed and will be part of the next Formulate release (2.x and 3.x).

[FuelAgency]

Cool. Thanks for your ongoing support NW.