MC-17269: Date format grid is not based on the locale defined in the back-office

Author: viktorpetryk

app/code/Magento/Ui/Component/Listing/Columns/Date.php

@@ -3,8 +3,12 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
+
 namespace Magento\Ui\Component\Listing\Columns;
 
+use Magento\Framework\App\ObjectManager;
+use Magento\Framework\Locale\Bundle\DataBundle;
+use Magento\Framework\Locale\ResolverInterface;
 use Magento\Framework\Stdlib\BooleanUtils;
 use Magento\Framework\View\Element\UiComponent\ContextInterface;
 use Magento\Framework\View\Element\UiComponentFactory;
@@ -28,11 +32,28 @@ class Date extends Column
      */
     private $booleanUtils;
 
+    /**
+     * @var ResolverInterface
+     */
+    private $localeResolver;
+
+    /**
+     * @var string
+     */
+    private $locale;
+
+    /**
+     * @var DataBundle
+     */
+    private $dataBundle;
+
     /**
      * @param ContextInterface $context
      * @param UiComponentFactory $uiComponentFactory
      * @param TimezoneInterface $timezone
      * @param BooleanUtils $booleanUtils
+     * @param ResolverInterface $localeResolver
+     * @param DataBundle $dataBundle
      * @param array $components
      * @param array $data
      */
@@ -41,11 +62,16 @@ public function __construct(
         UiComponentFactory $uiComponentFactory,
         TimezoneInterface $timezone,
         BooleanUtils $booleanUtils,
+        ResolverInterface $localeResolver = null,
+        DataBundle $dataBundle = null,
         array $components = [],
         array $data = []
     ) {
         $this->timezone = $timezone;
         $this->booleanUtils = $booleanUtils;
+        $this->localeResolver = $localeResolver ?? ObjectManager::getInstance()->get(ResolverInterface::class);
+        $this->locale = $this->localeResolver->getLocale();
+        $this->dataBundle = $dataBundle ?? ObjectManager::getInstance()->get(DataBundle::class);
         parent::__construct($context, $uiComponentFactory, $components, $data);
     }
 
@@ -65,6 +91,25 @@ public function prepare()
                 ]
             ]
         ];
+
+        $localeData = $this->dataBundle->get($this->locale);
+        /** @var \ResourceBundle $monthsData */
+        $monthsData = $localeData['calendar']['gregorian']['monthNames'];
+        $months = array_values(iterator_to_array($monthsData['format']['wide']));
+        $monthsShort = array_values(
+            iterator_to_array(
+                null !== $monthsData->get('format')->get('abbreviated')
+                    ? $monthsData['format']['abbreviated']
+                    : $monthsData['format']['wide']
+            )
+        );
+
+        $config['storeLocale'] = $this->locale;
+        $config['dateData'] = [
+            'months' => $months,
+            'monthsShort' => $monthsShort,
+        ];
+        $config['dateFormat'] = $this->timezone->getDateTimeFormat(\IntlDateFormatter::MEDIUM);
         $this->setData('config', $config);
 
         parent::prepare();
@@ -78,7 +123,7 @@ public function prepareDataSource(array $dataSource)
         if (isset($dataSource['data']['items'])) {
             foreach ($dataSource['data']['items'] as & $item) {
                 if (isset($item[$this->getData('name')])
-                   && $item[$this->getData('name')] !== "0000-00-00 00:00:00"
+                    && $item[$this->getData('name')] !== "0000-00-00 00:00:00"
                 ) {
                     $date = $this->timezone->date(new \DateTime($item[$this->getData('name')]));
                     $timezone = isset($this->getConfiguration()['timezone'])

app/code/Magento/Ui/view/base/web/js/grid/columns/date.js

@@ -17,6 +17,7 @@ define([
         defaults: {
             dateFormat: 'MMM d, YYYY h:mm:ss A'
         },
+        dateData: [],
 
         /**
          * Overrides base method to normalize date format.
@@ -37,6 +38,7 @@ define([
          * @returns {String} Formatted date.
          */
         getLabel: function (value, format) {
+            moment.locale(this.storeLocale, {...this.dateData});
             var date = moment(this._super());
 
             date = date.isValid() && value[this.index] ?