Merge forwardport of #11067 to 2.3-develop branch

Applied pull request patch https://github.com/magento/magento2/pull/11067.patch (created by @joachimVT) based on commit(s):
  1. c3ea1f5
  2. 0c0393d
  3. f0baa28
  4. c7f318c

Fixed GitHub Issues in 2.3-develop branch:
  - #4248: Validations not working on customer registration on DOB field. (reported by @skmomemo)
  - #6350: Frontend: Datepicker/calendar control does not use the store locale (reported by @heldchen)
  - #6831: Magento 2.1.1 Invalid input date format 'Invalid date' (reported by @Nerogee)
  - #6858: DatePicker date format does not reflect user's locale (reported by @qubaji)
  - #9743: Invalid date when customer validate with French locale (reported by @vjacquemin-sqli)

Author: magento-engcom-team

app/code/Magento/Customer/Block/Widget/Dob.php

@@ -208,17 +208,14 @@ public function getHtmlId()
      */
     public function getHtmlExtraParams()
     {
-        $extraParams = [
-            "'validate-date-au':true"
-        ];
-
+        $validators = [];
         if ($this->isRequired()) {
-            $extraParams[] = 'required:true';
+            $validators['required'] = true;
         }
-
-        $extraParams = implode(', ', $extraParams);
-
-        return 'data-validate="{' . $extraParams . '}"';
+        $validators['validate-date'] = [
+            'dateFormat' => $this->getDateFormat()
+        ];
+        return 'data-validate="' . $this->_escaper->escapeHtml(json_encode($validators)) . '"';
     }
 
     /**

app/code/Magento/Customer/Test/Unit/Block/Widget/DobTest.php

@@ -57,6 +57,16 @@ class DobTest extends \PHPUnit\Framework\TestCase
      */
     protected $filterFactory;
 
+    /**
+     * @var \Magento\Framework\Escaper
+     */
+    private $escaper;
+
+    /**
+     * @var \Magento\Framework\View\Element\Template\Context
+     */
+    private $context;
+
     protected function setUp()
     {
         $zendCacheCore = new \Zend_Cache_Core();
@@ -82,8 +92,13 @@ protected function setUp()
             ['localeResolver' => $localeResolver]
         );
 
-        $context = $this->createMock(\Magento\Framework\View\Element\Template\Context::class);
-        $context->expects($this->any())->method('getLocaleDate')->will($this->returnValue($timezone));
+        $this->context = $this->createMock(\Magento\Framework\View\Element\Template\Context::class);
+        $this->context->expects($this->any())->method('getLocaleDate')->will($this->returnValue($timezone));
+        $this->escaper = $this->getMockBuilder(\Magento\Framework\Escaper::class)
+            ->disableOriginalConstructor()
+            ->setMethods(['escapeHtml'])
+            ->getMock();
+        $this->context->expects($this->any())->method('getEscaper')->will($this->returnValue($this->escaper));
 
         $this->attribute = $this->getMockBuilder(\Magento\Customer\Api\Data\AttributeMetadataInterface::class)
             ->getMockForAbstractClass();
@@ -100,7 +115,7 @@ protected function setUp()
             ->getMock();
 
         $this->_block = new \Magento\Customer\Block\Widget\Dob(
-            $context,
+            $this->context,
             $this->createMock(\Magento\Customer\Helper\Address::class),
             $this->customerMetadata,
             $this->createMock(\Magento\Framework\View\Element\Html\Date::class),
@@ -454,25 +469,37 @@ public function testGetMaxDateRangeWithException()
             );
         $this->assertNull($this->_block->getMaxDateRange());
     }
-    
+
     public function testGetHtmlExtraParamsWithoutRequiredOption()
     {
+        $this->escaper->expects($this->any())
+            ->method('escapeHtml')
+            ->with('{"validate-date":{"dateFormat":"M\/d\/yy"}}')
+            ->will($this->returnValue('{"validate-date":{"dateFormat":"M\/d\/yy"}}'));
         $this->attribute->expects($this->once())
             ->method("isRequired")
             ->willReturn(false);
 
-        $this->assertEquals($this->_block->getHtmlExtraParams(), 'data-validate="{\'validate-date-au\':true}"');
+        $this->assertEquals(
+            $this->_block->getHtmlExtraParams(),
+            'data-validate="{"validate-date":{"dateFormat":"M\/d\/yy"}}"'
+        );
     }
 
     public function testGetHtmlExtraParamsWithRequiredOption()
     {
         $this->attribute->expects($this->once())
             ->method("isRequired")
             ->willReturn(true);
+        $this->escaper->expects($this->any())
+            ->method('escapeHtml')
+            ->with('{"required":true,"validate-date":{"dateFormat":"M\/d\/yy"}}')
+            ->will($this->returnValue('{"required":true,"validate-date":{"dateFormat":"M\/d\/yy"}}'));
+        $this->context->expects($this->any())->method('getEscaper')->will($this->returnValue($this->escaper));
 
         $this->assertEquals(
-            $this->_block->getHtmlExtraParams(),
-            'data-validate="{\'validate-date-au\':true, required:true}"'
+            'data-validate="{"required":true,"validate-date":{"dateFormat":"M\/d\/yy"}}"',
+            $this->_block->getHtmlExtraParams()
         );
     }
 }

lib/web/mage/validation.js

@@ -9,14 +9,15 @@
     if (typeof define === 'function' && define.amd) {
         define([
             'jquery',
+            'moment',
             'jquery/ui',
             'jquery/validate',
             'mage/translate'
         ], factory);
     } else {
         factory(jQuery);
     }
-}(function ($) {
+}(function ($, moment) {
     'use strict';
 
     var creditCartTypes, rules, showLabel, originValidateDelegate;
@@ -988,10 +989,10 @@
             $.mage.__('Please use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed.') //eslint-disable-line max-len
         ],
         'validate-date': [
-            function (v) {
-                var test = new Date(v);
+            function (value, params, additionalParams) {
+                var test = moment(value, additionalParams.dateFormat);
 
-                return $.mage.isEmptyNoTrim(v) || !isNaN(test);
+                return $.mage.isEmptyNoTrim(value) || test.isValid();
             },
             $.mage.__('Please enter a valid date.')