MC-35771: Datepicker/calendar control does not use the store locale

Author: tsviklinskyi

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

@@ -7,11 +7,16 @@
 
 use Magento\Customer\Api\CustomerMetadataInterface;
 use Magento\Framework\Api\ArrayObjectSearch;
+use Magento\Framework\App\ObjectManager;
+use Magento\Framework\Json\EncoderInterface;
+use Magento\Framework\Locale\Bundle\DataBundle;
+use Magento\Framework\Locale\ResolverInterface;
 
 /**
  * Customer date of birth attribute block
  *
  * @SuppressWarnings(PHPMD.DepthOfInheritance)
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
  */
 class Dob extends AbstractWidget
 {
@@ -39,24 +44,42 @@ class Dob extends AbstractWidget
      */
     protected $filterFactory;
 
+    /**
+     * JSON Encoder
+     *
+     * @var EncoderInterface
+     */
+    private $encoder;
+
+    /**
+     * @var ResolverInterface
+     */
+    private $localeResolver;
+
     /**
      * @param \Magento\Framework\View\Element\Template\Context $context
      * @param \Magento\Customer\Helper\Address $addressHelper
      * @param CustomerMetadataInterface $customerMetadata
      * @param \Magento\Framework\View\Element\Html\Date $dateElement
      * @param \Magento\Framework\Data\Form\FilterFactory $filterFactory
      * @param array $data
+     * @param EncoderInterface|null $encoder
+     * @param ResolverInterface|null $localeResolver
      */
     public function __construct(
         \Magento\Framework\View\Element\Template\Context $context,
         \Magento\Customer\Helper\Address $addressHelper,
         CustomerMetadataInterface $customerMetadata,
         \Magento\Framework\View\Element\Html\Date $dateElement,
         \Magento\Framework\Data\Form\FilterFactory $filterFactory,
-        array $data = []
+        array $data = [],
+        ?EncoderInterface $encoder = null,
+        ?ResolverInterface $localeResolver = null
     ) {
         $this->dateElement = $dateElement;
         $this->filterFactory = $filterFactory;
+        $this->encoder = $encoder ?? ObjectManager::getInstance()->get(EncoderInterface::class);
+        $this->localeResolver = $localeResolver ?? ObjectManager::getInstance()->get(ResolverInterface::class);
         parent::__construct($context, $addressHelper, $customerMetadata, $data);
     }
 
@@ -377,4 +400,30 @@ public function getFirstDay()
             \Magento\Store\Model\ScopeInterface::SCOPE_STORE
         );
     }
+
+    /**
+     * Get translated calendar config json formatted
+     *
+     * @return string
+     */
+    public function getTranslatedCalendarConfigJson(): string
+    {
+        $localeData = (new DataBundle())->get($this->localeResolver->getLocale());
+        $monthsData = $localeData['calendar']['gregorian']['monthNames'];
+        $daysData = $localeData['calendar']['gregorian']['dayNames'];
+
+        return $this->encoder->encode(
+            [
+                'closeText' => __('Done'),
+                'prevText' => __('Prev'),
+                'nextText' => __('Next'),
+                'currentText' => __('Today'),
+                'monthNames' => array_values(iterator_to_array($monthsData['format']['wide'])),
+                'monthNamesShort' => array_values(iterator_to_array($monthsData['format']['abbreviated'])),
+                'dayNames' => array_values(iterator_to_array($daysData['format']['wide'])),
+                'dayNamesShort' => array_values(iterator_to_array($daysData['format']['abbreviated'])),
+                'dayNamesMin' => array_values(iterator_to_array($daysData['format']['short'])),
+            ]
+        );
+    }
 }

app/code/Magento/Customer/view/frontend/templates/widget/dob.phtml

@@ -27,10 +27,12 @@ $fieldCssClass = 'field date field-' . $block->getHtmlId();
 $fieldCssClass .= $block->isRequired() ? ' required' : '';
 ?>
 <div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
-    <label class="label" for="<?= $block->escapeHtmlAttr($block->getHtmlId()) ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
+    <label class="label" for="<?= $block->escapeHtmlAttr($block->getHtmlId()) ?>">
+        <span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span>
+    </label>
     <div class="control customer-dob">
         <?= $block->getFieldHtml() ?>
-        <?php if ($_message = $block->getAdditionalDescription()) : ?>
+        <?php if ($_message = $block->getAdditionalDescription()): ?>
             <div class="note"><?= $block->escapeHtml($_message) ?></div>
         <?php endif; ?>
     </div>
@@ -42,4 +44,15 @@ $fieldCssClass .= $block->isRequired() ? ' required' : '';
            "Magento_Customer/js/validation": {}
        }
     }
- </script>
+</script>
+
+<script>
+    require([
+        'jquery',
+        'jquery-ui-modules/datepicker'
+    ], function ( $ ) {
+        $.extend(true, $, {
+            calendarConfig: <?= $block->escapeJs($block->getTranslatedCalendarConfigJson()); ?>
+        });
+    });
+</script>