EWPP-4833: Remove moment.js dependency.

ecl-builder.config.js

@@ -39,6 +39,5 @@ module.exports = {
     { from: path.resolve(nodeModules, '@ecl/preset-eu/dist'), to: path.resolve(outputFolder, 'dist/eu') },
     { from: path.resolve(nodeModules, 'svg4everybody/dist'), patterns: 'svg4everybody.js', to: path.resolve(outputFolder, 'dist/js') },
     { from: path.resolve(nodeModules, 'pikaday'), patterns: 'pikaday.js', to: path.resolve(outputFolder, 'dist/js') },
-    { from: path.resolve(nodeModules, 'moment/min'), patterns: 'moment.min.js', to: path.resolve(outputFolder, 'dist/js') },
   ]
 };

js/ecl_datepicker.js

@@ -7,9 +7,7 @@
     attach: function attach(context, settings) {
       var elements = document.querySelectorAll('[data-ecl-datepicker-toggle]');
       for (var i = 0; i < elements.length; i++) {
-        var datepicker = new ECL.Datepicker(elements[i], {
-          format: settings.oe_theme.ecl_datepicker_format
-        });
+        var datepicker = new ECL.Datepicker(elements[i]);
         datepicker.init();
       }
     }

oe_theme.libraries.yml

@@ -8,7 +8,6 @@ component_library_ec:
       dist/ec/styles/ecl-ec-print.css: { media: print }
       css/style-ec.css: { media: screen }
   js:
-    dist/js/moment.min.js: { minified: true }
     dist/ec/scripts/ecl-ec.js: {}
     js/ecl_auto_init.js: {}
   dependencies:
@@ -24,7 +23,6 @@ component_library_eu:
       dist/eu/styles/ecl-eu-print.css: { media: print }
       css/style-eu.css: { media: screen }
   js:
-    dist/js/moment.min.js: { minified: true }
     dist/eu/scripts/ecl-eu.js: {}
     js/ecl_auto_init.js: {}
   dependencies:

oe_theme.theme

@@ -339,16 +339,7 @@ function oe_theme_preprocess_input__checkbox(array &$variables): void {
  * Implements template_preprocess_input__date().
  */
 function oe_theme_preprocess_input__date(array &$variables): void {
-  $php_date_format = $variables['element']['#date_date_format'] ?? 'Y-m-d';
-  $format_map = [
-    // @todo find a cleverer way of mapping PHP date formats to the expected
-    // ECL ones.
-    'Y-m-d' => 'YYYY-MM-DD',
-  ];
-  $ecl_format = $format_map[$php_date_format] ?? 'YYYY-MM-DD';
   $variables['#attached']['library'][] = 'oe_theme/ecl_datepicker';
-  $variables['#attached']['drupalSettings']['oe_theme']['ecl_datepicker_format'] = $ecl_format;
-  $variables['placeholder'] = $ecl_format;
 }
 
 /**

package.json

@@ -70,7 +70,6 @@
     "chokidar-cli": "3.0.0",
     "grunt": "1.6.1",
     "grunt-contrib-copy": "1.0.0",
-    "moment": "2.29.1",
     "node-sass": "8.0.0",
     "npm-run-all": "4.1.5",
     "patch-package": "8.0.0",

templates/form/input--date.html.twig

@@ -24,7 +24,7 @@
     required: element['#required'],
     disabled: attributes.disabled is defined,
     invalid: element['#errors'] is not empty,
-    placeholder: placeholder,
+    placeholder: 'DD-MM-YYYY',
     default_value: attributes.value,
     extra_classes: classes|default(''),
     extra_attributes: extra_attributes|default([]),

tests/modules/oe_theme_js_test/src/Form/DatePickerTestForm.php

@@ -66,7 +66,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#type' => 'date',
       '#title' => $this->t('Test date picker two'),
       '#description' => $this->t('Date field two.'),
-      '#default_value' => DrupalDateTime::createFromFormat('Y-m-d', '2020-05-10'),
+      '#default_value' => DrupalDateTime::createFromFormat('d-m-Y', '10-05-2020', 'UTC'),
       '#required' => FALSE,
     ];
 
@@ -94,7 +94,7 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
       if (!$value) {
         continue;
       }
-      $date = DrupalDateTime::createFromFormat('Y-m-d', $value);
+      $date = DrupalDateTime::createFromFormat('d-m-Y', $value);
       $this->messenger->addStatus($this->t('Date @key is @date', [
         '@key' => $key,
         '@date' => $date->format('j F Y'),

tests/src/Functional/ConfigurationTest.php

@@ -65,7 +65,6 @@ public function testDefaultLibraryLoading(): void {
       $this->assertLinkContainsHref('/oe_theme/dist/ec/styles/optional/ecl-ec-default.css');
       $this->assertLinkContainsHref('/oe_theme/css/style-ec.css');
 
-      $this->assertScriptContainsSrc('/oe_theme/dist/js/moment.min.js');
       $this->assertScriptContainsSrc('/oe_theme/dist/ec/scripts/ecl-ec.js');
       $this->assertScriptContainsSrc('/oe_theme/js/ecl_auto_init.js');
 
@@ -119,7 +118,6 @@ public function testChangeComponentLibrary(): void {
       $this->assertLinkContainsHref('/oe_theme/dist/eu/styles/optional/ecl-eu-default.css');
       $this->assertLinkContainsHref('/oe_theme/css/style-eu.css');
 
-      $this->assertScriptContainsSrc('/oe_theme/dist/js/moment.min.js');
       $this->assertScriptContainsSrc('/oe_theme/dist/eu/scripts/ecl-eu.js');
       $this->assertScriptContainsSrc('/oe_theme/js/ecl_auto_init.js');
 
@@ -163,7 +161,6 @@ public function testChangeComponentLibrary(): void {
 
       $this->assertScriptContainsSrc('/oe_theme/dist/ec/scripts/ecl-ec.js');
       $this->assertScriptContainsSrc('/oe_theme/js/ecl_auto_init.js');
-      $this->assertScriptContainsSrc('/oe_theme/dist/js/moment.min.js');
 
       // Assert that we don't load rtl styling.
       $this->assertLinkNotContainsHref('/oe_theme/dist/ec/styles/optional/ecl-rtl.css');

tests/src/FunctionalJavascript/JavascriptBehavioursTest.php

@@ -162,7 +162,7 @@ public function testEclDatePicker(): void {
 
     // Assert the first date picker.
     $input = $this->getSession()->getPage()->find('css', 'input[name="test_datepicker_one"]');
-    $this->assertEquals('YYYY-MM-DD', $input->getAttribute('placeholder'));
+    $this->assertEquals('DD-MM-YYYY', $input->getAttribute('placeholder'));
     $this->assertNull($input->getAttribute('value'));
     $this->assertTrue($input->hasAttribute('data-ecl-datepicker-toggle'));
     $this->assertTrue($input->hasAttribute('required'));
@@ -205,14 +205,14 @@ public function testEclDatePicker(): void {
     // Pick a date and assert it was set.
     $day = $datepickers[0]->find('css', 'button[data-pika-day=1]');
     $day->click();
-    $this->assertEquals($now->format('Y-m') . '-01', $input->getValue());
+    $this->assertEquals('01-' . $now->format('m-Y'), $input->getValue());
     // Give the datepicker a chance to hide.
     sleep(1);
     $this->assertFalse($datepickers[0]->isVisible());
 
     // Assert some small differences on the second date input element.
     $input = $this->getSession()->getPage()->find('css', 'input[name="test_datepicker_two"]');
-    $this->assertEquals('YYYY-MM-DD', $input->getAttribute('placeholder'));
+    $this->assertEquals('DD-MM-YYYY', $input->getAttribute('placeholder'));
     $this->assertStringContainsString('2020-05-10', $input->getAttribute('value'));
     $this->assertTrue($input->hasAttribute('data-ecl-datepicker-toggle'));
     $this->assertFalse($input->hasAttribute('required'));