Dates on the frontend are not localized

[jakubhavlak]

Problem is in DatePickerType, which uses a constant format (Czech localization: dd.MM.yyyy), both in admin and front-end:

A localized date format should be used.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[boris-brtan]

is this already implemented?

[stale[bot]]

This issue has been automatically marked as stale because there was no activity within the last 4 months (and it is quite a long time). It will be closed if no further activity occurs. Thank you for your contributions.

[henzigo]

Stalebot open it!

[PetrHeinz]

@henzigo Can you please provide some more info, ideally some steps to reproduce?

I've taken a look at list of orders on front-end on both English and Czech domain and the date localization seems fine ("2019-03-15" for English / "21. 3. 2019" for Czech):

Tested on current master installed via Docker. I don't suppose anything has changed in this behavior lately.

[henzigo]

Ye sorry. if you work only with output its fine. But framework is not prepared for working with localized dates in forms and javascript. Problem is when you want to use input with date or use datepicker for example.

[PetrHeinz]

Thanks for clarification :+1:

[VitMickal]

This issue is going to solved within User Story which has been raised - US-5162

[stale[bot]]

This issue has been automatically marked as stale because there was no activity within the last 4 months (and it is quite a long time). It will be closed if no further activity occurs. Thank you for your contributions.

[henzigo]

open it

[stale[bot]]

This issue has been automatically marked as stale because there was no activity within the last 4 months (and it is quite a long time). It will be closed if no further activity occurs. Thank you for your contributions.

[henzigo]

Any new information?

[sslt]

This issue has been resolved in #1343 if I am not mistaken. Correct me if I am wrong @henzigo

[pk16011990]

nope, #1343 is about timezones, not about localization in form fields.

This issue has few problems (in version SSFW 6.x):

• We want 4-digits in CS years. Library INTL needs variant MEDIUM for 4-digits year. However MEDIUM variant in Hungarian locale means month formated as 3-letters word (eg. oct). Hungarian needs SHORT variant (month as number in hungarian).
• Format definition is different for JS datepicker and for parsing in DatePickerType in PHP.
• If we want same formatting for all places, problem is: Few languages (eg. czech) put space after dot ("1. 1. 2000"), It causes problem in JS Datepicker, because it requires space too in manual user input.
• HTML5 input type=date uses browser localization and ignores application localization. Eg. czech browser sends wrong date format to english application. Users on mobile do not have better keyboard.

I solved it on version SSFW 6.x with hardcoded locales:

diff --git a/src/Shopsys/ShopBundle/Controller/Front/CartController.php b/src/Shopsys/ShopBundle/Controller/Front/CartController.php
index 0f1e3b09c07591d392e2e601c329d0f658a77e32..93137e789353f0116c51f6331007de1809cce1ca 100644
--- a/src/Shopsys/ShopBundle/Controller/Front/CartController.php
+++ b/src/Shopsys/ShopBundle/Controller/Front/CartController.php
@@ -16,9 +16,6 @@ use Shopsys\ShopBundle\Form\Front\Cart\CartNoteFormType;
 use Shopsys\ShopBundle\Form\Front\Cart\CopyToOtherCartFormType;
 use Shopsys\ShopBundle\Form\Front\Cart\MoveToOtherCartFormType;
 use Shopsys\ShopBundle\Form\Front\Cart\QuickAddProductFormType;
-use Shopsys\ShopBundle\Model\Attachment\Attachment;
-use Shopsys\ShopBundle\Model\Attachment\AttachmentFacade;
-use Shopsys\ShopBundle\Model\Budget\Transfer\BudgetTransferFacade;
 use Shopsys\ShopBundle\Model\Cart\AddProductResult;
 use Shopsys\ShopBundle\Model\Cart\CachedCartVentusPriceFacade;
 use Shopsys\ShopBundle\Model\Cart\Cart;
@@ -29,6 +26,7 @@ use Shopsys\ShopBundle\Model\Cart\Item\CartItemFacade;
 use Shopsys\ShopBundle\Model\Cart\Item\CartItemService;
 use Shopsys\ShopBundle\Model\Cart\SelectedCartItemsFacade;
 use Shopsys\ShopBundle\Model\Customer\User;
+use Shopsys\ShopBundle\Model\Localization\DateLocalization;
 use Shopsys\ShopBundle\Model\Order\Item\Transfer\VentusQuantifiedProductsPricingFacade;
 use Shopsys\ShopBundle\Model\Order\OrderFlowFacade;
 use Shopsys\ShopBundle\Model\Order\OrderItemPreview\OrderItemPreviewFacade;
@@ -135,14 +133,9 @@ class CartController extends FrontBaseController
     private $rolesFacade;
 
     /**
-     * @var \Shopsys\ShopBundle\Model\Budget\Transfer\BudgetTransferFacade
+     * @var \Shopsys\ShopBundle\Model\Localization\DateLocalization
      */
-    private $budgetTransferFacade;
-
-    /**
-     * @var \Shopsys\ShopBundle\Model\Attachment\AttachmentFacade
-     */
-    private $attachmentFacade;
+    private $dateLocalization;
 
     public function __construct(
         CartFacade $cartFacade,
@@ -161,8 +154,7 @@ class CartController extends FrontBaseController
         ProductAccessoryFacade $productAccessoryFacade,
         OrderItemPreviewFacade $orderItemPreviewFacade,
         RolesFacade $rolesFacade,
-        BudgetTransferFacade $budgetTransferFacade,
-        AttachmentFacade $attachmentFacade
+        DateLocalization $dateLocalization
     ) {
         $this->cartFacade = $cartFacade;
         $this->errorService = $errorService;
@@ -180,8 +172,7 @@ class CartController extends FrontBaseController
         $this->productAccessoryFacade = $productAccessoryFacade;
         $this->orderItemPreviewFacade = $orderItemPreviewFacade;
         $this->rolesFacade = $rolesFacade;
-        $this->budgetTransferFacade = $budgetTransferFacade;
-        $this->attachmentFacade = $attachmentFacade;
+        $this->dateLocalization = $dateLocalization;
     }
 
     /**
@@ -611,19 +602,25 @@ class CartController extends FrontBaseController
 
     public function getDeliveryDateForActiveCartAjaxAction(Request $request)
     {
+        $localizedDeliveryDate = $request->get('deliveryDate');
+        $deliveryDate = $this->dateLocalization->parseLocalizedDate($localizedDeliveryDate);
+        if ($deliveryDate === null) {
+            $deliveryDate = new DateTime();
+        }
+
         $realDeliveryDate = $this->orderItemPreviewFacade->getRealDeliveryDateForActiveCartAndSetItAndOrderItemsPreviewsToSessionForStep3OfOrderProcess(
             $this->getUser(),
             $request->get('transportId'),
             $request->get('paymentId'),
             $request->get('deliveryAddressId'),
-            DateTime::createFromFormat('d.m.Y', $request->get('deliveryDate')),
+            $deliveryDate,
             $this->cartFacade->getCartOfCurrentCustomer()
         );
 
         return new JsonResponse([
             'success' => true,
             'realDeliveryDate' => $realDeliveryDate,
-            'formattedRealDeliveryDate' => $realDeliveryDate->format('d.m.Y'),
+            'formattedRealDeliveryDate' => $this->dateLocalization->formatDate($realDeliveryDate),
         ]);
     }
 
diff --git a/src/Shopsys/ShopBundle/Form/DatePickerType.php b/src/Shopsys/ShopBundle/Form/DatePickerType.php
index d3f8e76afe98435cb0af9231783ba8ac0a598072..14b04b276011cc339fb979c7c8e791ac2369ca3b 100644
--- a/src/Shopsys/ShopBundle/Form/DatePickerType.php
+++ b/src/Shopsys/ShopBundle/Form/DatePickerType.php
@@ -2,23 +2,43 @@
 
 namespace Shopsys\ShopBundle\Form;
 
+use Shopsys\ShopBundle\Model\Localization\Localization;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\DateType;
 use Symfony\Component\OptionsResolver\OptionsResolver;
 
 class DatePickerType extends AbstractType
 {
-    const FORMAT_PHP = 'dd.MM.yyyy';
-    const FORMAT_JS = 'dd.mm.yy';
+    /**
+     * It must be equivalent to format in JS (jquery.ui.datepicker-{locale}.js)
+     */
+    const FORMAT_PHP_BY_LOCALE = [
+        'cs' => 'd. M. yyyy',
+        'en' => 'yyyy-MM-dd',
+        'sk' => 'd. M. yyyy',
+        'pl' => 'dd.MM.yyyy',
+        'hu' => 'yyyy. MM. dd.',
+    ];
+
+    /**
+     * @var \Shopsys\ShopBundle\Model\Localization\Localization
+     */
+    private $localization;
+
+    public function __construct(Localization $localization)
+    {
+        $this->localization = $localization;
+    }
 
     /**
      * @param \Symfony\Component\OptionsResolver\OptionsResolver $resolver
      */
     public function configureOptions(OptionsResolver $resolver)
     {
+        $currentLocale = $this->localization->getLocale();
         $resolver->setDefaults([
             'widget' => 'single_text',
-            'format' => self::FORMAT_PHP,
+            'format' => self::FORMAT_PHP_BY_LOCALE[$currentLocale],
         ]);
     }
 
diff --git a/src/Shopsys/ShopBundle/Form/Front/Filter/TextDatesFilterFormType.php b/src/Shopsys/ShopBundle/Form/Front/Filter/TextDatesFilterFormType.php
index 0a92ed38d36ac077c2f51e8659772df9fbb52fa9..23fb80080f38490343fe955b4bdd88e685331605 100644
--- a/src/Shopsys/ShopBundle/Form/Front/Filter/TextDatesFilterFormType.php
+++ b/src/Shopsys/ShopBundle/Form/Front/Filter/TextDatesFilterFormType.php
@@ -4,6 +4,7 @@ namespace Shopsys\ShopBundle\Form\Front\Filter;
 
 use Shopsys\ShopBundle\Form\DatePickerType;
 use Shopsys\ShopBundle\Model\Filter\TextDatesFilterData;
+use Shopsys\ShopBundle\Model\Localization\DateLocalization;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
@@ -12,6 +13,16 @@ use Symfony\Component\OptionsResolver\OptionsResolver;
 
 class TextDatesFilterFormType extends AbstractType
 {
+    /**
+     * @var \Shopsys\ShopBundle\Model\Localization\DateLocalization
+     */
+    private $dateLocalization;
+
+    public function __construct(DateLocalization $dateLocalization)
+    {
+        $this->dateLocalization = $dateLocalization;
+    }
+
     /**
      * @param \Symfony\Component\Form\FormBuilderInterface $builder
      * @param array $options
@@ -25,13 +36,13 @@ class TextDatesFilterFormType extends AbstractType
             ->add('dateFrom', DatePickerType::class, [
                 'required' => false,
                 'attr' => [
-                    'max' => (new \DateTime())->format('d.m.Y'),
+                    'max' => $this->dateLocalization->formatDate(new \DateTime()),
                 ],
             ])
             ->add('dateTo', DatePickerType::class, [
                 'required' => false,
                 'attr' => [
-                    'max' => (new \DateTime())->format('d.m.Y'),
+                    'max' => $this->dateLocalization->formatDate(new \DateTime()),
                 ],
             ])
             ->add('submit', SubmitType::class);
diff --git a/src/Shopsys/ShopBundle/Form/Front/Order/TransportAndPaymentFormType.php b/src/Shopsys/ShopBundle/Form/Front/Order/TransportAndPaymentFormType.php
index 379da11288bc693ad27b5e6011bac323e715296b..543bf971b105ff8747245918bcbd45c0b83197a9 100644
--- a/src/Shopsys/ShopBundle/Form/Front/Order/TransportAndPaymentFormType.php
+++ b/src/Shopsys/ShopBundle/Form/Front/Order/TransportAndPaymentFormType.php
@@ -6,6 +6,7 @@ use DateTimeImmutable;
 use Shopsys\ShopBundle\Form\DatePickerType;
 use Shopsys\ShopBundle\Model\Customer\DeliveryAddressFacade;
 use Shopsys\ShopBundle\Model\Customer\User;
+use Shopsys\ShopBundle\Model\Localization\DateLocalization;
 use Shopsys\ShopBundle\Model\Order\FrontOrderData;
 use Shopsys\ShopBundle\Model\Order\OrderItemPreview\OrderItemPreviewFacade;
 use Shopsys\ShopBundle\Model\Payment\Payment;
@@ -50,18 +51,25 @@ class TransportAndPaymentFormType extends AbstractType
      */
     private $orderItemPreviewFacade;
 
+    /**
+     * @var \Shopsys\ShopBundle\Model\Localization\DateLocalization
+     */
+    private $dateLocalization;
+
     public function __construct(
         TransportFacade $transportFacade,
         PaymentFacade $paymentFacade,
         DeliveryAddressFacade $deliveryAddressFacade,
         RolesFacade $rolesFacade,
-        OrderItemPreviewFacade $orderItemPreviewFacade
+        OrderItemPreviewFacade $orderItemPreviewFacade,
+        DateLocalization $dateLocalization
     ) {
         $this->transportFacade = $transportFacade;
         $this->paymentFacade = $paymentFacade;
         $this->deliveryAddressFacade = $deliveryAddressFacade;
         $this->rolesFacade = $rolesFacade;
         $this->orderItemPreviewFacade = $orderItemPreviewFacade;
+        $this->dateLocalization = $dateLocalization;
     }
 
     /**
@@ -119,7 +127,7 @@ class TransportAndPaymentFormType extends AbstractType
             ->add('deliveryDate', DatePickerType::class, [
                 'required' => false,
                 'attr' => [
-                    'min' => (new \DateTime())->format('d.m.Y'),
+                    'min' => $this->dateLocalization->formatDate(new \DateTime()),
                     'class' => 'js-order-step-2-delivery-date',
                 ],
                 'label' => 'Požadované datum dodání',
diff --git a/src/Shopsys/ShopBundle/Model/Localization/CustomDateTimeFormatterFactory.php b/src/Shopsys/ShopBundle/Model/Localization/CustomDateTimeFormatterFactory.php
index 821c5fc6023c07f654257ac883e430811d5a553b..0b8ac334a116482c073c23ee6a527ffa0ecdf705 100644
--- a/src/Shopsys/ShopBundle/Model/Localization/CustomDateTimeFormatterFactory.php
+++ b/src/Shopsys/ShopBundle/Model/Localization/CustomDateTimeFormatterFactory.php
@@ -9,18 +9,66 @@ use Shopsys\ShopBundle\Component\Localization\DateTimeFormatter;
 
 class CustomDateTimeFormatterFactory
 {
+    const CUSTOM_PATTERNS = [
+        [
+            'dateType' => IntlDateFormatter::MEDIUM,
+            'timeType' => IntlDateFormatter::NONE,
+            'patternsByLocale' => [
+                'cs' => 'd. M. y',
+                'en' => 'y-MM-dd',
+                'sk' => 'd. M. y',
+                'pl' => 'dd.MM.y',
+                'hu' => 'y. M. d.',
+            ],
+        ],
+        [
+            'dateType' => IntlDateFormatter::MEDIUM,
+            'timeType' => IntlDateFormatter::SHORT,
+            'patternsByLocale' => [
+                'cs' => 'd. M. y H:mm',
+                'en' => 'y-MM-dd, h:mm a',
+                'sk' => 'd. M. y, H:mm',
+                'pl' => 'dd.MM.y, HH:mm',
+                'hu' => 'y. M. d. H:mm',
+            ],
+        ],
+        [
+            'dateType' => IntlDateFormatter::MEDIUM,
+            'timeType' => IntlDateFormatter::MEDIUM,
+            'patternsByLocale' => [
+                'cs' => 'd. M. y H:mm:ss',
+                'en' => 'y-MM-dd, h:mm:ss a',
+                'sk' => 'd. M. y, H:mm:ss',
+                'pl' => 'dd.MM.y, HH:mm:ss',
+                'hu' => 'y. M. d. H:mm:ss',
+            ],
+        ],
+        [
+            'dateType' => IntlDateFormatter::NONE,
+            'timeType' => IntlDateFormatter::MEDIUM,
+            'patternsByLocale' => [
+                'cs' => 'H:mm:ss',
+                'en' => 'h:mm:ss a',
+                'sk' => 'H:mm:ss',
+                'pl' => 'HH:mm:ss',
+                'hu' => 'H:mm:ss',
+            ],
+        ],
+    ];
+
     /**
      * @return \Shopsys\ShopBundle\Component\Localization\DateTimeFormatter
      */
     public function create()
     {
         $customDateTimeFormatPatternRepository = new DateTimeFormatPatternRepository();
-        $customDateTimeFormatPatternRepository->add(
-            new DateTimeFormatPattern('y-MM-dd', 'en', IntlDateFormatter::MEDIUM, IntlDateFormatter::NONE)
-        );
-        $customDateTimeFormatPatternRepository->add(
-            new DateTimeFormatPattern('y-MM-dd, h:mm:ss a', 'en', IntlDateFormatter::MEDIUM, IntlDateFormatter::MEDIUM)
-        );
+        foreach (self::CUSTOM_PATTERNS as $patternsTypes) {
+            foreach ($patternsTypes['patternsByLocale'] as $locale => $pattern) {
+                $customDateTimeFormatPatternRepository->add(
+                    new DateTimeFormatPattern($pattern, $locale, $patternsTypes['dateType'], $patternsTypes['timeType'])
+                );
+            }
+        }
 
         $dateTimeFormatter = new DateTimeFormatter($customDateTimeFormatPatternRepository);
 
diff --git a/src/Shopsys/ShopBundle/Model/Localization/DateLocalization.php b/src/Shopsys/ShopBundle/Model/Localization/DateLocalization.php
new file mode 100644
index 0000000000000000000000000000000000000000..9266ab20f33434f9aedaee1b2700627aacd7a807
--- /dev/null
+++ b/src/Shopsys/ShopBundle/Model/Localization/DateLocalization.php
@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Shopsys\ShopBundle\Model\Localization;
+
+use DateTime;
+use IntlDateFormatter;
+use Shopsys\ShopBundle\Form\DatePickerType;
+use Shopsys\ShopBundle\Twig\DateTimeFormatterExtension;
+use Symfony\Component\Form\Exception\TransformationFailedException;
+use Symfony\Component\Form\Extension\Core\DataTransformer\DateTimeToLocalizedStringTransformer;
+use Symfony\Component\Form\Extension\Core\Type\DateType;
+
+class DateLocalization
+{
+    /**
+     * @var \Shopsys\ShopBundle\Model\Localization\Localization
+     */
+    private $localization;
+
+    /**
+     * @var \Shopsys\ShopBundle\Twig\DateTimeFormatterExtension
+     */
+    private $dateTimeFormatterExtension;
+
+    public function __construct(
+        Localization $localization,
+        DateTimeFormatterExtension $dateTimeFormatterExtension
+    ) {
+        $this->localization = $localization;
+        $this->dateTimeFormatterExtension = $dateTimeFormatterExtension;
+    }
+
+    public function parseLocalizedDate(string $localizedDate, ?string $locale = null): ?DateTime
+    {
+        if ($locale === null) {
+            $locale = $this->localization->getLocale();
+        }
+
+        $transformer = new DateTimeToLocalizedStringTransformer(
+            null,
+            null,
+            DateType::DEFAULT_FORMAT,
+            IntlDateFormatter::NONE,
+            IntlDateFormatter::GREGORIAN,
+            DatePickerType::FORMAT_PHP_BY_LOCALE[$locale]
+        );
+
+        try {
+            return $transformer->reverseTransform($localizedDate);
+        } catch (TransformationFailedException $e) {
+            return null;
+        }
+    }
+
+    public function formatDate(DateTime $date, ?string $locale = null): string
+    {
+        if ($locale === null) {
+            $locale = $this->localization->getLocale();
+        }
+
+        return $this->dateTimeFormatterExtension->formatDate($date, $locale);
+    }
+}
diff --git a/src/Shopsys/ShopBundle/Model/Statistics/StatisticsService.php b/src/Shopsys/ShopBundle/Model/Statistics/StatisticsService.php
index 65320b1c530f0848ebb4339a16f7fcb15d904013..5d374ca958c9d9a3c96f011c0c9271b17214dd53 100644
--- a/src/Shopsys/ShopBundle/Model/Statistics/StatisticsService.php
+++ b/src/Shopsys/ShopBundle/Model/Statistics/StatisticsService.php
@@ -4,18 +4,18 @@ namespace Shopsys\ShopBundle\Model\Statistics;
 
 use DateInterval;
 use DateTime;
-use Shopsys\ShopBundle\Twig\DateTimeFormatterExtension;
+use Shopsys\ShopBundle\Model\Localization\DateLocalization;
 
 class StatisticsService
 {
     /**
-     * @var \Shopsys\ShopBundle\Twig\DateTimeFormatterExtension
+     * @var \Shopsys\ShopBundle\Model\Localization\DateLocalization
      */
-    private $dateTimeFormatterExtension;
+    private $dateLocalization;
 
-    public function __construct(DateTimeFormatterExtension $dateTimeFormatterExtension)
+    public function __construct(DateLocalization $dateLocalization)
     {
-        $this->dateTimeFormatterExtension = $dateTimeFormatterExtension;
+        $this->dateLocalization = $dateLocalization;
     }
 
     /**
@@ -59,7 +59,7 @@ class StatisticsService
     {
         $returnDates = [];
         foreach ($valueByDateTimeDataPoints as $valueByDateTimeDataPoint) {
-            $returnDates[] = $this->dateTimeFormatterExtension->formatDate($valueByDateTimeDataPoint->getDateTime());
+            $returnDates[] = $this->dateLocalization->formatDate($valueByDateTimeDataPoint->getDateTime());
         }
 
         return $returnDates;
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/components/datePicker.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/components/datePicker.js
index f315b83fe75c83c397d3a9e1bfd867bea77313a5..c966f9ccc6d10002a225c82b6af18393927fd87a 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/components/datePicker.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/components/datePicker.js
@@ -15,9 +15,6 @@
                 options.maxDate = $(this).attr('max');
             }
 
-            // Date format is fixed so that it is understood by back-end
-            options.dateFormat = Shopsys.constant('\\Shopsys\\ShopBundle\\Form\\DatePickerType::FORMAT_JS');
-
             $(this).datepicker(options);
         });
     };
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/date.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/date.js
new file mode 100644
index 0000000000000000000000000000000000000000..5fd13da8b4cf1c9a495165ab4fd4fa9fa873492c
--- /dev/null
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/date.js
@@ -0,0 +1,48 @@
+(function ($) {
+    Shopsys = window.Shopsys || {};
+    Shopsys.date = Shopsys.date || {};
+
+    /**
+     * @param localizedDate string
+     * @param dateFormat string or undefined for date format by DatePicker format and current locale. Can contains only
+     * one type delimiter and characters d[day], m[month] and y[year] in any number of reps ("mm" is same as "m").
+     * it is case insensitive.
+     * @returns { day: X, month: Y, year: Z } or false on wrong localizedDate
+     */
+    Shopsys.date.parseLocalizedDate = function (localizedDate, dateFormat) {
+        if (dateFormat === undefined) {
+            dateFormat = $.datepicker.regional[global.locale]['dateFormat'];
+        }
+
+        localizedDate = localizedDate.replace(/\s+/g, ''); // ignore whitespaces
+        dateFormat = dateFormat.replace(/\s+/g, ''); // ignore whitespaces
+        dateFormat = dateFormat.toLowerCase(); // pattern in PHP can use capitals
+
+        var delimiterMatch = dateFormat.match(/[^dmy]+/);
+        if (delimiterMatch === null) {
+            throw Error('Delimiter in date format was not detected!');
+        }
+        var delimiter = delimiterMatch.pop();
+        var dateParts = localizedDate.split(delimiter);
+        if (dateParts === null || dateParts.length < 3) {
+            return false;
+        }
+
+        var partsMatches = dateFormat.split(delimiter);
+        partsMatches = partsMatches.map(function (part) {
+            return part.substring(0, 1); // ignore repeated day, month or year characters  (eg. ["yyyy", "mm", "dd"] -> ["y", "m", "d"])
+        });
+
+        var dayOffset = partsMatches.indexOf('d');
+        var monthOffset = partsMatches.indexOf('m');
+        var yearOffset = partsMatches.indexOf('y');
+
+        return {
+            day: parseInt(dateParts[dayOffset]),
+            month: parseInt(dateParts[monthOffset]),
+            year: parseInt(dateParts[yearOffset])
+        };
+
+    };
+
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/filter/nameDatesFilter.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/filter/nameDatesFilter.js
index 2609737987e7ab81cd49416225f4ce644e63bbfb..94bc4fa1ce36c39601296b888dad616a2edd1153 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/filter/nameDatesFilter.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/filter/nameDatesFilter.js
@@ -139,18 +139,16 @@
         }
 
         function parseDate (date) {
-            var dateArray = date.split('.');
-            if (dateArray.length !== 3) {
+            var parsedDate = Shopsys.date.parseLocalizedDate(date);
+            if (parsedDate === false) {
                 return false;
             }
 
-            dateArray.forEach(function (value, index) {
-                if (value.length < 2) {
-                    dateArray[index] = value.padStart(2, 0);
-                }
-            });
+            var dayValue = parsedDate.day.toString().padStart(2, 0);
+            var monthValue = parsedDate.month.toString().padStart(2, 0);
+            var yearValue = parsedDate.year.toString().padStart(4, 0);
 
-            return Number(dateArray[2] + dateArray[1] + dateArray[0]);
+            return Number(yearValue + monthValue + dayValue);
         }
     };
 
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-cs.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-cs.js
index 9805bcdb826ee5d526b937a80babc2e754d381b6..f27c0e3e089222b793096beddac58202259cff8c 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-cs.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-cs.js
@@ -1,6 +1,7 @@
+/* Edited by Shopsys for another format and settings before document ready */
 /* Czech initialisation for the jQuery UI date picker plugin. */
 /* Written by Tomas Muller ([email protected]). */
-jQuery(function($){
+(function($){
 	$.datepicker.regional['cs'] = {
 		closeText: 'Zavřít',
 		prevText: '&#x3c;Dříve',
@@ -14,10 +15,10 @@ jQuery(function($){
 		dayNamesShort: ['ne', 'po', 'út', 'st', 'čt', 'pá', 'so'],
 		dayNamesMin: ['ne','po','út','st','čt','pá','so'],
 		weekHeader: 'Týd',
-		dateFormat: 'dd.mm.yy',
+		dateFormat: 'd. m. yy', // It must be equivalent to Shopsys\ShopBundle\Form\DatePickerType::FORMAT_PHP_BY_LOCALE
 		firstDay: 1,
 		isRTL: false,
 		showMonthAfterYear: false,
 		yearSuffix: ''};
 	$.datepicker.setDefaults($.datepicker.regional['cs']);
-});
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-en.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-en.js
index fac2151370379fb554e9dd973ef7b2911ebec54e..95e5d277aedd98e89f6154fd8e35d80c0e064d34 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-en.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-en.js
@@ -1,6 +1,7 @@
+/* Edited by Shopsys for another format and settings before document ready */
 /* English/UK initialisation for the jQuery UI date picker plugin. */
 /* Written by Stuart. */
-jQuery(function($){
+(function($){
     $.datepicker.regional['en'] = {
         closeText: "Done",
         prevText: "Prev",
@@ -14,10 +15,10 @@ jQuery(function($){
         dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
         dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
         weekHeader: "Wk",
-        dateFormat: "dd/mm/yy",
+        dateFormat: "yy-mm-dd", // It must be equivalent to Shopsys\ShopBundle\Form\DatePickerType::FORMAT_PHP_BY_LOCALE
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: false,
         yearSuffix: "" };
     $.datepicker.setDefaults($.datepicker.regional['en']);
-});
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-hu.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-hu.js
index 89ee92280b3fc6b68eddec0a1ebef935d424864a..9eac4fafa0ff8386368998445871ca57443b6aa2 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-hu.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-hu.js
@@ -1,5 +1,6 @@
+/* Edited by Shopsys for another format and settings before document ready */
 /* Hungarian initialisation for the jQuery UI date picker plugin. */
-jQuery(function($){
+(function($){
     $.datepicker.regional['hu'] = {
         closeText: "bezár",
         prevText: "vissza",
@@ -13,10 +14,10 @@ jQuery(function($){
         dayNamesShort: [ "Vas", "HĂ©t", "Ked", "Sze", "CsĂĽ", "PĂ©n", "Szo" ],
         dayNamesMin: [ "V", "H", "K", "Sze", "Cs", "P", "Szo" ],
         weekHeader: "HĂ©t",
-        dateFormat: "yy.mm.dd.",
+        dateFormat: "yy. mm. dd.", // It must be equivalent to Shopsys\ShopBundle\Form\DatePickerType::FORMAT_PHP_BY_LOCALE
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: true,
         yearSuffix: "" };
     $.datepicker.setDefaults($.datepicker.regional['hu']);
-});
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-pl.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-pl.js
index a91a8adfc6a3296a73b42d50cd0d394f1f95e2c0..b189411988d0223db9864f1833045a3338823f6b 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-pl.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-pl.js
@@ -1,6 +1,7 @@
+/* Edited by Shopsys for another format and settings before document ready */
 /* Polish initialisation for the jQuery UI date picker plugin. */
 /* Written by Jacek Wysocki ([email protected]). */
-jQuery(function($){
+(function($){
     $.datepicker.regional['pl'] = {
         closeText: "Zamknij",
         prevText: "&#x3C;Poprzedni",
@@ -14,10 +15,10 @@ jQuery(function($){
         dayNamesShort: [ "Nie","Pn","Wt","Ĺšr","Czw","Pt","So" ],
         dayNamesMin: [ "N","Pn","Wt","Ĺšr","Cz","Pt","So" ],
         weekHeader: "Tydz",
-        dateFormat: "dd.mm.yy",
+        dateFormat: "dd.mm.yy", // It must be equivalent to Shopsys\ShopBundle\Form\DatePickerType::FORMAT_PHP_BY_LOCALE
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: false,
         yearSuffix: "" };
     $.datepicker.setDefaults($.datepicker.regional['pl']);
-});
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-sk.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-sk.js
index 4b5ebc3f6f77ee9028472672f04b94eed4fe41a7..aa0e3d644856cca50c2c533dc9850ca9e8842f41 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-sk.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/plugins/jquery.ui.datepicker-sk.js
@@ -1,6 +1,7 @@
+/* Edited by Shopsys for another format and settings before document ready */
 /* Slovak initialisation for the jQuery UI date picker plugin. */
 /* Written by Vojtech Rinik ([email protected]). */
-jQuery(function($){
+(function($){
     $.datepicker.regional['sk'] = {
         closeText: "ZavrieĹĄ",
         prevText: "&#x3C;Predchádzajúci",
@@ -14,10 +15,10 @@ jQuery(function($){
         dayNamesShort: [ "Ned","Pon","Uto","Str","Ĺ tv","Pia","Sob" ],
         dayNamesMin: [ "Ne","Po","Ut","St","Ĺ t","Pia","So" ],
         weekHeader: "Ty",
-        dateFormat: "dd.mm.yy",
+        dateFormat: "d. m. yy", // It must be equivalent to Shopsys\ShopBundle\Form\DatePickerType::FORMAT_PHP_BY_LOCALE
         firstDay: 1,
         isRTL: false,
         showMonthAfterYear: false,
         yearSuffix: "" };
     $.datepicker.setDefaults($.datepicker.regional['sk']);
-});
+})(jQuery);
diff --git a/src/Shopsys/ShopBundle/Resources/scripts/frontend/validation/dateTimeToLocalizedStringTransformer.js b/src/Shopsys/ShopBundle/Resources/scripts/frontend/validation/dateTimeToLocalizedStringTransformer.js
index 0173e21671366871e1980688eaa8022aee736460..312abed8c5b15d28658a8cca5ed22c1a833b0df5 100644
--- a/src/Shopsys/ShopBundle/Resources/scripts/frontend/validation/dateTimeToLocalizedStringTransformer.js
+++ b/src/Shopsys/ShopBundle/Resources/scripts/frontend/validation/dateTimeToLocalizedStringTransformer.js
@@ -2,14 +2,16 @@
 
     SymfonyComponentFormExtensionCoreDataTransformerDateTimeToLocalizedStringTransformer = function () {
         this.reverseTransform = function (value) {
-            if (this.pattern.toLowerCase() === 'dd.mm.yyyy') {
-                var regexp = /^(\d{2})\.(\d{2})\.(\d{4})$/;
-                var parts = regexp.exec(value);
-                if (parts) {
-                    value = parts[3] + '-' + parts[2] + '-' + parts[1];
-                }
+            var parsedDate = Shopsys.date.parseLocalizedDate(value, this.pattern);
+            if (parsedDate === false) {
+                return value;
             }
-            return value;
+
+            var dayValue = parsedDate.day.toString().padStart(2, 0);
+            var monthValue = parsedDate.month.toString().padStart(2, 0);
+            var yearValue = parsedDate.year.toString().padStart(4, 0);
+
+            return yearValue + '-' + monthValue + '-' + dayValue;
         };
     };
 
diff --git a/src/Shopsys/ShopBundle/Resources/views/Admin/Form/theme.html.twig b/src/Shopsys/ShopBundle/Resources/views/Admin/Form/theme.html.twig
index 2010408b10c57463df999d683d8269e1b06e39d1..96a4c89e416f61c8f690bf890ff4a6ee4b8729e9 100644
--- a/src/Shopsys/ShopBundle/Resources/views/Admin/Form/theme.html.twig
+++ b/src/Shopsys/ShopBundle/Resources/views/Admin/Form/theme.html.twig
@@ -920,6 +920,7 @@
 {% endblock %}
 
 {% block date_picker_widget %}
+    {%- set type = 'text' -%} {# browsers force their format for date html5 inputs and ignore localization from aplication - example: CS browser shows magic value "dd.mm.rrrr" for aplication in EN locale #}
     {% if isSimple|default(false) == false %}
         <div class="form-line__side">
             <div class="form-line__item">
diff --git a/src/Shopsys/ShopBundle/Resources/views/Admin/Layout/base.html.twig b/src/Shopsys/ShopBundle/Resources/views/Admin/Layout/base.html.twig
index 15b652734fd28eb2aa22b86c79a610495829d316..5411269db3649169551b22291a2685b107d9870a 100644
--- a/src/Shopsys/ShopBundle/Resources/views/Admin/Layout/base.html.twig
+++ b/src/Shopsys/ShopBundle/Resources/views/Admin/Layout/base.html.twig
@@ -29,6 +29,11 @@
             'bundles/bmatznerjquery/js/jquery.min.js',
             'bundles/bmatznerjquery/js/jquery-migrate.js',
             'bundles/bmatznerjqueryui/js/minified/jquery-ui.min.js',
+            'frontend/plugins/jquery.ui.datepicker-cs.js',
+            'frontend/plugins/jquery.ui.datepicker-en.js',
+            'frontend/plugins/jquery.ui.datepicker-hu.js',
+            'frontend/plugins/jquery.ui.datepicker-pl.js',
+            'frontend/plugins/jquery.ui.datepicker-sk.js',
             'frontend/components/filterAllNodes.js',
             'frontend/components/keyCodes.js',
             'frontend/components/escape.js',
@@ -47,6 +52,7 @@
             'frontend/plugins/jquery.ui.datepicker-cs.js',
             'frontend/plugins/jquery.hoverIntent.js',
             'frontend/plugins/fastclick.js',
+            'frontend/date.js',
             'frontend/validation/*.js',
             'frontend/checkboxToggle.js',
             'frontend/magnificPopup.custom.js',
diff --git a/src/Shopsys/ShopBundle/Resources/views/Front/Content/Order/step3.html.twig b/src/Shopsys/ShopBundle/Resources/views/Front/Content/Order/step3.html.twig
index b06a6be3e6531f27f45888b1c65b4f5d9ce180f2..13736c29d10d0aac27bfdba77be128a3182fcfee 100644
--- a/src/Shopsys/ShopBundle/Resources/views/Front/Content/Order/step3.html.twig
+++ b/src/Shopsys/ShopBundle/Resources/views/Front/Content/Order/step3.html.twig
@@ -39,7 +39,7 @@
                 <div class="box-order-step-3__transport__select__item__input">
                     <div class="box-order-step-3__transport__select__item__input__in">
                         <select class="input select-small" disabled>
-                            <option>{{ deliveryDate|date('d.m.Y') }}</option>
+                            <option>{{ deliveryDate|formatDate }}</option>
                         </select>
                     </div>
                 </div>
diff --git a/src/Shopsys/ShopBundle/Resources/views/Front/Form/theme.html.twig b/src/Shopsys/ShopBundle/Resources/views/Front/Form/theme.html.twig
index 5684dcc9adbba58cb5be0fcb222752d9d810ae4c..56ca5b6517604bb5d9877a31e3a61672f4599070 100644
--- a/src/Shopsys/ShopBundle/Resources/views/Front/Form/theme.html.twig
+++ b/src/Shopsys/ShopBundle/Resources/views/Front/Form/theme.html.twig
@@ -302,6 +302,7 @@
 {% block date_picker_widget %}
     {% spaceless %}
         {% set attr = attr|merge({'class': ((attr.class|default('') ~ ' js-date-picker')|trim)}) %}
+        {%- set type = 'text' -%} {# browsers force their format for date html5 inputs and ignore localization from aplication - example: CS browser shows magic value "dd.mm.rrrr" for aplication in EN locale #}
         {{- block('form_widget') -}}
     {% endspaceless %}
 {% endblock date_picker_widget %}

[stale[bot]]

This issue has been automatically marked as stale because there was no activity within the last 4 months (and it is quite a long time). It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because there was no activity within the last 4 months (and it is quite a long time). It will be closed if no further activity occurs. Thank you for your contributions.