Merge pull request #3479 from open-formulieren/fix/3443-date-validation

[#3443] Date validation

.gitignore

@@ -56,3 +56,7 @@ src/openforms/fonts/
 
 # typically a symlink (or full copy!) during local dev
 src/openforms/static/sdk
+
+# Custom extensions symlinks
+src/prefill_haalcentraalhr
+src/token_exchange

src/openforms/forms/migrations/0093_date_component_settings.py

@@ -0,0 +1,43 @@
+# Generated by Django 3.2.21 on 2023-09-13 08:24
+
+from django.db import migrations
+from openforms.formio.utils import iter_components
+
+
+def add_date_component_settings(apps, schema_editor):
+    FormDefinition = apps.get_model("forms", "FormDefinition")
+
+    form_definitions = FormDefinition.objects.all()
+
+    form_definitions_to_update = []
+    for form_definition in form_definitions:
+        for comp in iter_components(configuration=form_definition.configuration):
+            if comp["type"] == "date":
+                if translated_errors := comp.get("translatedErrors"):
+                    for (
+                        language_code,
+                        custom_error_messages,
+                    ) in translated_errors.items():
+                        translated_errors[language_code]["minDate"] = ""
+                        translated_errors[language_code]["maxDate"] = ""
+
+                comp.setdefault("customOptions", {})
+                comp["customOptions"]["allowInvalidPreload"] = True
+
+                form_definitions_to_update.append(form_definition)
+
+    if form_definitions_to_update:
+        FormDefinition.objects.bulk_update(
+            form_definitions_to_update, fields=["configuration"]
+        )
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("forms", "0092_more_time_custom_errors"),
+    ]
+
+    operations = [
+        migrations.RunPython(add_date_component_settings, migrations.RunPython.noop)
+    ]

src/openforms/forms/tests/test_migrations.py

@@ -54,3 +54,75 @@ def test_the_custom_error_is_added(self):
                 },
             },
         )
+
+
+class TestAddDateComponentSettings(TestMigrations):
+    app = "forms"
+    migrate_from = "0092_more_time_custom_errors"
+    migrate_to = "0093_date_component_settings"
+
+    def setUpBeforeMigration(self, apps):
+        FormDefinition = apps.get_model("forms", "FormDefinition")
+        FormStep = apps.get_model("forms", "FormStep")
+        Form = apps.get_model("forms", "Form")
+
+        self.form_def = FormDefinition.objects.create(
+            name="Date",
+            slug="date",
+            configuration={
+                "components": [
+                    {
+                        "key": "dateComponent",
+                        "type": "date",
+                        "label": "Date component",
+                        "customOptions": {},
+                        "translatedErrors": {
+                            "en": {"required": ""},
+                            "nl": {"required": ""},
+                        },
+                    },
+                    {
+                        "key": "anotherDateComponent",
+                        "type": "date",
+                        "label": "Another Date component",
+                        "translatedErrors": {
+                            "en": {"required": ""},
+                            "nl": {"required": ""},
+                        },
+                    },
+                ]
+            },
+        )
+        form = Form.objects.create(name="Form date")
+
+        FormStep.objects.create(form=form, form_definition=self.form_def, order=0)
+
+    def test_new_settings(self):
+        self.form_def.refresh_from_db()
+
+        self.assertEqual(
+            self.form_def.configuration["components"][0]["translatedErrors"],
+            {
+                "en": {
+                    "required": "",
+                    "minDate": "",
+                    "maxDate": "",
+                },
+                "nl": {
+                    "required": "",
+                    "minDate": "",
+                    "maxDate": "",
+                },
+            },
+        )
+
+        self.assertTrue(
+            self.form_def.configuration["components"][0]["customOptions"][
+                "allowInvalidPreload"
+            ]
+        )
+        self.assertTrue(
+            self.form_def.configuration["components"][1]["customOptions"][
+                "allowInvalidPreload"
+            ]
+        )

src/openforms/js/components/form/date.js

@@ -10,6 +10,7 @@ import {
   TRANSLATIONS,
   VALIDATION,
 } from './edit/tabs';
+import {getValidationEditForm} from './edit/validationEditFormUtils';
 import {localiseSchema} from './i18n';
 
 const DateTimeField = Formio.Components.components.datetime;
@@ -54,6 +55,12 @@ class DateField extends DateTimeField {
             },
           },
         },
+        customOptions: {
+          // Issue #3443 - Flatpickr is preventing the value from being set when entering it manually if it is outside the set minDate/maxDate range.
+          // With allowInvalidPreload: true, we tell it to set the value also if it is invalid, so that then validators can kick in.
+          // https://github.com/flatpickr/flatpickr/blob/master/src/index.ts#L2498
+          allowInvalidPreload: true,
+        },
       },
       ...extend
     );
@@ -71,14 +78,14 @@ class DateField extends DateTimeField {
   }
 
   static editForm() {
-    const VALIDATION_TAB = {
+    const VALIDATION_TAB = getValidationEditForm({
       ...VALIDATION,
       components: [
         ...VALIDATION.components,
         getMinMaxValidationEditForm('minDate', 'date'),
         getMinMaxValidationEditForm('maxDate', 'date'),
       ],
-    };
+    });
     const TABS = {
       ...DEFAULT_TABS,
       components: [

src/openforms/js/components/form/edit/validationEditFormUtils.js

@@ -11,6 +11,8 @@ const getCustomValidationErrorMessagesEditForm = validators => {
 
       if (validator_key.includes('minTime')) return {minTime: '', invalid_time: ''};
       if (validator_key.includes('maxTime')) return {maxTime: '', invalid_time: ''};
+      if (validator_key.includes('minDate')) return {minDate: ''};
+      if (validator_key.includes('maxDate')) return {maxDate: ''};
     })
   );