ENGCOM-3357: Fix for Issue #4136, MAGETWO-53440 #14485

Author: VladimirZaets

app/code/Magento/Rule/Model/Condition/AbstractCondition.php

@@ -615,6 +615,9 @@ public function getValueElement()
             // date format intentionally hard-coded
             $elementParams['input_format'] = \Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT;
             $elementParams['date_format'] = \Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT;
+            $elementParams['placeholder'] = \Magento\Framework\Stdlib\DateTime::DATE_INTERNAL_FORMAT;
+            $elementParams['autocomplete'] = 'off';
+            $elementParams['readonly'] = 'true';
         }
         return $this->getForm()->addField(
             $this->getPrefix() . '__' . $this->getId() . '__value',

app/code/Magento/Rule/view/adminhtml/web/rules.js

@@ -220,6 +220,8 @@ define([
 
             var elem = Element.down(elemContainer, 'input.input-text');
 
+            jQuery(elem).trigger('contentUpdated');
+
             if (elem) {
                 elem.focus();
 

app/design/adminhtml/Magento/backend/web/css/styles-old.less

@@ -3845,6 +3845,26 @@
 
     .rule-param-edit .element {
         display: inline;
+        position: relative;
+    }
+
+    .rule-param-edit .element input.input-date,
+    .rule-param-edit .element input.input-date[readonly] {
+        background-color: @color-white;
+        min-width: 140px;
+        width: 140px !important;
+        cursor: pointer;
+        text-align: center;
+        opacity: 1;
+        margin-right: 10px;
+        padding-right: 40px;
+
+        + .ui-datepicker-trigger {
+            position: absolute;
+            width: 140px;
+            text-align: right;
+            left: 0;
+        }
     }
 
     .rule-param-edit .element .addafter {

dev/tests/functional/lib/Magento/Mtf/Client/Element/ConditionsElement.php

@@ -6,9 +6,9 @@
 
 namespace Magento\Mtf\Client\Element;
 
-use Magento\Mtf\ObjectManager;
-use Magento\Mtf\Client\Locator;
 use Magento\Mtf\Client\ElementInterface;
+use Magento\Mtf\Client\Locator;
+use Magento\Mtf\ObjectManager;
 
 /**
  * Typified element class for conditions.
@@ -135,6 +135,13 @@ class ConditionsElement extends SimpleElement
      */
     protected $chooserGridLocator = 'div[id*=chooser]';
 
+    /**
+     * Datepicker xpath.
+     *
+     * @var string
+     */
+    private $datepicker = './/*[contains(@class,"ui-datepicker-trigger")]';
+
     /**
      * Key of last find param.
      *
@@ -189,10 +196,7 @@ class ConditionsElement extends SimpleElement
     protected $exception;
 
     /**
-     * Set value to conditions.
-     *
-     * @param string $value
-     * @return void
+     * @inheritdoc
      */
     public function setValue($value)
     {
@@ -411,7 +415,16 @@ protected function fillText($rule, ElementInterface $param)
     {
         $value = $param->find('input', Locator::SELECTOR_TAG_NAME);
         if ($value->isVisible()) {
-            $value->setValue($rule);
+            if (!$value->getAttribute('readonly')) {
+                $value->setValue($rule);
+            } else {
+                $datepicker = $param->find(
+                    $this->datepicker,
+                    Locator::SELECTOR_XPATH,
+                    DatepickerElement::class
+                );
+                $datepicker->setValue($rule);
+            }
 
             $apply = $param->find('.//*[@class="rule-param-apply"]', Locator::SELECTOR_XPATH);
             if ($apply->isVisible()) {

dev/tests/functional/lib/Magento/Mtf/Client/Element/DatepickerElement.php

@@ -66,13 +66,16 @@ public function setValue($value)
         $date = $this->parseDate($value);
         $date[1] = ltrim($date[1], '0');
         $this->click();
-        $this->find($this->datePickerButton, Locator::SELECTOR_XPATH)->click();
         $datapicker = $this->find($this->datePickerBlock, Locator::SELECTOR_XPATH);
+        $datepickerClose = $datapicker->find($this->datePickerButtonClose, Locator::SELECTOR_XPATH);
+        if (!$datepickerClose->isVisible()) {
+            $this->find($this->datePickerButton, Locator::SELECTOR_XPATH)->click();
+        }
         $datapicker->find($this->datePickerYear, Locator::SELECTOR_XPATH, 'select')->setValue($date[2]);
         $datapicker->find($this->datePickerMonth, Locator::SELECTOR_XPATH, 'select')->setValue($date[0]);
         $datapicker->find(sprintf($this->datePickerCalendar, $date[1]), Locator::SELECTOR_XPATH)->click();
         if ($datapicker->isVisible()) {
-            $datapicker->find($this->datePickerButtonClose, Locator::SELECTOR_XPATH)->click();
+            $datepickerClose->click();
         }
     }
 

lib/internal/Magento/Framework/Data/Form/Element/AbstractElement.php

@@ -238,6 +238,7 @@ public function getHtmlAttributes()
             'onchange',
             'disabled',
             'readonly',
+            'autocomplete',
             'tabindex',
             'placeholder',
             'data-form-part',

lib/internal/Magento/Framework/Data/Form/Element/Date.php

@@ -146,7 +146,7 @@ public function getValueInstance()
      */
     public function getElementHtml()
     {
-        $this->addClass('admin__control-text  input-text');
+        $this->addClass('admin__control-text input-text input-date');
         $dateFormat = $this->getDateFormat() ?: $this->getFormat();
         $timeFormat = $this->getTimeFormat();
         if (empty($dateFormat)) {

lib/internal/Magento/Framework/Data/Test/Unit/Form/Element/AbstractElementTest.php

@@ -195,6 +195,7 @@ public function testGetHtmlAttributes()
             'onchange',
             'disabled',
             'readonly',
+            'autocomplete',
             'tabindex',
             'placeholder',
             'data-form-part',

lib/web/mage/calendar.js

@@ -66,6 +66,9 @@
      * Widget calendar
      */
     $.widget('mage.calendar', {
+        options: {
+            autoComplete: true
+        },
 
         /**
          * Merge global options with options passed to widget invoke
@@ -379,6 +382,9 @@
                 .addClass('v-middle')
                 .text('') // Remove jQuery UI datepicker generated image
                 .append('<span>' + pickerButtonText + '</span>');
+
+            $(element).attr('autocomplete', this.options.autoComplete ? 'on' : 'off');
+
             this._setCurrentDate(element);
         },