Merge pull request #1629 from buckaroo-it/BTI-742-Support-multiple-date-of-birth-formats-for-Billink-&-In3

SandervdHulst · web-flow · commit 768f242f5904 · 2026-05-19T12:47:55.000+02:00
BTI-742 support multiple date of birth formats for Billink &amp; In3
diff --git a/i18n/be_FR.csv b/i18n/be_FR.csv
@@ -193,3 +193,4 @@
 "Male","Homme"
 "Female","Femme"
 "Other","Autre"
+"DD-MM-YYYY or DD/MM/YYYY","p. ex. 01/01/1970"
diff --git a/i18n/de_AT.csv b/i18n/de_AT.csv
@@ -602,3 +602,4 @@ Signature from push is incorrect""","Signatur von Push ist falsch"
 "Male","Männlich"
 "Female","Weiblich"
 "Other","Divers"
+"DD-MM-YYYY or DD/MM/YYYY","z. B. 01-01-1970"
diff --git a/i18n/de_CH.csv b/i18n/de_CH.csv
@@ -632,3 +632,4 @@ Signature from push is incorrect""","Signatur von Push ist falsch"
 "Male","Männlich"
 "Female","Weiblich"
 "Other","Divers"
+"DD-MM-YYYY or DD/MM/YYYY","z. B. 01-01-1970"
diff --git a/i18n/de_DE.csv b/i18n/de_DE.csv
@@ -651,3 +651,4 @@ Signature from push is incorrect""","Signatur von Push ist falsch"
 "Male","Männlich"
 "Female","Weiblich"
 "Other","Divers"
+"DD-MM-YYYY or DD/MM/YYYY","z. B. 01-01-1970"
diff --git a/i18n/en_US.csv b/i18n/en_US.csv
@@ -218,3 +218,4 @@
 "Male","Male"
 "Female","Female"
 "Other","Other"
+"DD-MM-YYYY or DD/MM/YYYY","e.g. 01-01-1970"
diff --git a/i18n/es_ES.csv b/i18n/es_ES.csv
@@ -631,3 +631,4 @@
 "Male","Hombre"
 "Female","Mujer"
 "Other","Otro"
+"DD-MM-YYYY or DD/MM/YYYY","p. ej. 01/01/1970"
diff --git a/i18n/fr_BE.csv b/i18n/fr_BE.csv
@@ -631,3 +631,4 @@ Magento Community Edition version""","Version de l'édition communautaire de Mag
 "Male","Homme"
 "Female","Femme"
 "Other","Autre"
+"DD-MM-YYYY or DD/MM/YYYY","p. ex. 01/01/1970"
diff --git a/i18n/fr_FR.csv b/i18n/fr_FR.csv
@@ -643,3 +643,4 @@ Magento Community Edition version""","Version de l'édition communautaire de Mag
 "Male","Homme"
 "Female","Femme"
 "Other","Autre"
+"DD-MM-YYYY or DD/MM/YYYY","p. ex. 01/01/1970"
diff --git a/i18n/it_IT.csv b/i18n/it_IT.csv
@@ -633,3 +633,4 @@
 "Male","Maschio"
 "Female","Femmina"
 "Other","Altro"
+"DD-MM-YYYY or DD/MM/YYYY","es. 01/01/1970"
diff --git a/i18n/nl_BE.csv b/i18n/nl_BE.csv
@@ -642,3 +642,4 @@
 "Male","Man"
 "Female","Vrouw"
 "Other","Anders"
+"DD-MM-YYYY or DD/MM/YYYY","bijv. 01/01/1970"
diff --git a/i18n/nl_NL.csv b/i18n/nl_NL.csv
@@ -350,7 +350,7 @@
 "The general Terms and Conditions for the Riverty payment method apply. The privacy policy of Riverty can be found here.","De Algemene Voorwaarden voor de betaalmethode Riverty zijn van toepassing. Het privacybeleid van Riverty vind je hier."
 "Accept terms of use","Accepteer algemene voorwaarden"
 "(DD/MM/YYYY)","(DD/MM/JJJJ)"
-"DD/MM/YYYY or DD-MM-YYYY","DD-MM-JJJJ"
+"DD-MM-YYYY or DD/MM/YYYY","bijv. 01-01-1970"
 "Any comments about this Beta release? <a target=\_blank\"" href=\""%s\""> Please let us know! </a>""","Heeft u opmerkingen over deze Beta release? <a target=\_blank\"" href=\""%s\""> Laat het ons weten! </a>"""
 "Buckaroo version","Buckaroo versie"
 "The transaction will be processed using %s.","De betaling zal verwerkt worden in %s."
diff --git a/view/frontend/web/js/view/payment/method-renderer/billink.js b/view/frontend/web/js/view/payment/method-renderer/billink.js
@@ -24,7 +24,7 @@ define(
         'buckaroo/checkout/payment/default',
         'Magento_Checkout/js/model/quote',
         'ko',
-        'buckaroo/checkout/datepicker',
+        'buckaroo/checkout/datepicker-enhanced',
         'Magento_Ui/js/lib/knockout/bindings/datepicker'
     ],
     function (
@@ -36,18 +36,42 @@ define(
     ) {
         'use strict';
 
+        $.validator.addMethod('validate-date-flexible', function (value) {
+            if (!value) return false;
+            var dateReg = /^\d{1,2}[\/\-\.]\d{1,2}[\/\-\.]\d{4}$/;
+            if (value.match(dateReg)) {
+                var parts = value.split(/[\/\-\.]/);
+                var day = parseInt(parts[0], 10);
+                var month = parseInt(parts[1], 10);
+                var year = parseInt(parts[2], 10);
+                if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > new Date().getFullYear()) {
+                    return false;
+                }
+                var date = new Date(year, month - 1, day);
+                return date.getDate() === day && date.getMonth() === (month - 1) && date.getFullYear() === year;
+            }
+            return false;
+        }, $.mage.__('Please use this date format: dd/mm/yyyy, dd-mm-yyyy or dd.mm.yyyy.'));
+
         $.validator.addMethod('validateAge', function (value) {
             if (value && (value.length > 0)) {
-                var dateReg = /^\d{2}[./-]\d{2}[./-]\d{4}$/;
+                var dateReg = /^\d{1,2}[\/\-\.]\d{1,2}[\/\-\.]\d{4}$/;
                 if (value.match(dateReg)) {
-                    var birthday = +new Date(
-                        value.substr(6, 4),
-                        value.substr(3, 2) - 1,
-                        value.substr(0, 2),
-                        0,
-                        0,
-                        0
-                    );
+                    var parts = value.split(/[\/\-\.]/);
+                    var day = parseInt(parts[0], 10);
+                    var month = parseInt(parts[1], 10);
+                    var year = parseInt(parts[2], 10);
+
+                    if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > new Date().getFullYear()) {
+                        return false;
+                    }
+
+                    var birthday = new Date(year, month - 1, day, 0, 0, 0);
+
+                    if (birthday.getDate() !== day || birthday.getMonth() !== (month - 1) || birthday.getFullYear() !== year) {
+                        return false;
+                    }
+
                     return ~~((Date.now() - birthday) / (31557600000)) >= 18;
                 }
             }
@@ -125,6 +149,17 @@ define(
                 redirectAfterPlaceOrder : true,
                 dp: datePicker,
 
+                filterDobInput: function (data, event) {
+                    var input = event.target;
+                    var filtered = input.value.replace(/[^\d\/\-\.]/g, '');
+                    if (input.value !== filtered) {
+                        var pos = input.selectionStart - (input.value.length - filtered.length);
+                        input.value = filtered;
+                        input.setSelectionRange(pos, pos);
+                    }
+                    return true;
+                },
+
                 initObservable: function () {
                     this._super().observe(
                         [
@@ -197,6 +232,10 @@ define(
                     return this;
                 },
 
+                getDobPlaceholder: function () {
+                    return $.mage.__('DD-MM-YYYY or DD/MM/YYYY');
+                },
+
                 getData: function () {
                     let phone = this.phone();
                     if (!this.showPhone() && quote.billingAddress() !== null) {
diff --git a/view/frontend/web/js/view/payment/method-renderer/capayablein3.js b/view/frontend/web/js/view/payment/method-renderer/capayablein3.js
@@ -24,7 +24,7 @@ define(
         'buckaroo/checkout/payment/default',
         'Magento_Checkout/js/model/quote',
         'ko',
-        'buckaroo/checkout/datepicker'
+        'buckaroo/checkout/datepicker-enhanced'
     ],
     function (
         $,
@@ -35,6 +35,23 @@ define(
     ) {
         'use strict';
 
+        $.validator.addMethod('validate-date-flexible', function (value) {
+            if (!value) return false;
+            var dateReg = /^\d{1,2}[\/\-\.]\d{1,2}[\/\-\.]\d{4}$/;
+            if (value.match(dateReg)) {
+                var parts = value.split(/[\/\-\.]/);
+                var day = parseInt(parts[0], 10);
+                var month = parseInt(parts[1], 10);
+                var year = parseInt(parts[2], 10);
+                if (day < 1 || day > 31 || month < 1 || month > 12 || year < 1900 || year > new Date().getFullYear()) {
+                    return false;
+                }
+                var date = new Date(year, month - 1, day);
+                return date.getDate() === day && date.getMonth() === (month - 1) && date.getFullYear() === year;
+            }
+            return false;
+        }, $.mage.__('Please use this date format: dd/mm/yyyy, dd-mm-yyyy or dd.mm.yyyy.'));
+
         const validPhone = function (value) {
             if (quote.billingAddress() === null) {
                 return false;
@@ -98,6 +115,17 @@ define(
                 redirectAfterPlaceOrder: false,
                 dp: datePicker,
 
+                filterDobInput: function (data, event) {
+                    var input = event.target;
+                    var filtered = input.value.replace(/[^\d\/\-\.]/g, '');
+                    if (input.value !== filtered) {
+                        var pos = input.selectionStart - (input.value.length - filtered.length);
+                        input.value = filtered;
+                        input.setSelectionRange(pos, pos);
+                    }
+                    return true;
+                },
+
                 getMessageText: function () {
                     return $.mage
                         .__('Je moet minimaal 18+ zijn om deze dienst te gebruiken. Als je op tijd betaalt, voorkom je extra kosten en zorg je dat je in de toekomst nogmaals gebruik kunt maken van de diensten van ' +
@@ -148,6 +176,10 @@ define(
                     return this;
                 },
 
+                getDobPlaceholder: function () {
+                    return $.mage.__('DD-MM-YYYY or DD/MM/YYYY');
+                },
+
                 getData : function () {
                     let telephone = quote.billingAddress().telephone;
                     if (validPhone(this.phone())) {
diff --git a/view/frontend/web/template/payment/buckaroo_magento2_billink.html b/view/frontend/web/template/payment/buckaroo_magento2_billink.html
@@ -67,19 +67,13 @@
                                    data-bind="
                                    datepicker: {
                                         storage: dob,
-                                        options: {
-                                            beforeShow: dp.addPickerClass,
-                                            onClose: dp.removePickerClass,
-                                            changeMonth: true,
-                                            changeYear: true,
-                                            yearRange: ((new Date()).getFullYear()-120) + ':' + (new Date()).getFullYear(),
-                                            dateFormat: 'dd/MM/yy'
-                                        }
+                                        options: dp.getOptions()
                                    },
                                    valueUpdate: 'change',
                                    value: dob,
-                                   attr: { placeholder: $t('DD/MM/YYYY') }"
-                                   data-validate="{required:true, 'validate-date-au': true, validateAge: true}"
+                                   event: { input: filterDobInput },
+                                   attr: { placeholder: getDobPlaceholder() }"
+                                   data-validate="{required:true, 'validate-date-flexible': true, validateAge: true}"
                                    name="payment[buckaroo_magento2_billink][customer_DoB]">
                         </div>
                     </div>
diff --git a/view/frontend/web/template/payment/buckaroo_magento2_capayablein3.html b/view/frontend/web/template/payment/buckaroo_magento2_capayablein3.html
@@ -96,19 +96,13 @@
                                    data-bind="
                                            datepicker: {
                                                 storage: dateValidate,
-                                                options: {
-                                                    beforeShow: dp.addPickerClass,
-                                                    onClose: dp.removePickerClass,
-                                                    changeMonth: true,
-                                                    changeYear: true,
-                                                    yearRange: ((new Date()).getFullYear()-120) + ':' + (new Date()).getFullYear(),
-                                                    dateFormat: 'dd/MM/yy'
-                                                }
+                                                options: dp.getOptions()
                                            },
                                            valueUpdate: 'blur',
                                            value: dateValidate,
-                                           attr: { placeholder: $t('DD/MM/YYYY') }"
-                                   data-validate="{required: true, 'validate-date-au': true}"
+                                           event: { input: filterDobInput },
+                                           attr: { placeholder: getDobPlaceholder() }"
+                                   data-validate="{required: true, 'validate-date-flexible': true}"
                                    name="payment[buckaroo_magento2_capayablein3][customer_DoB]">
                         </div>
                     </div>
