magento/magento2:#4136 - Widget condition with unexpected character not preventing from saving

- Restricted user to change date input value
- Open datepicker popup once user click on the date to be changed

Author: Vasilii Burlacu

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

@@ -630,6 +630,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/design/adminhtml/Magento/backend/web/css/styles-old.less

@@ -3840,6 +3840,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 {

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

@@ -147,7 +147,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

@@ -378,8 +378,6 @@
                 .text('') // Remove jQuery UI datepicker generated image
                 .append('<span>' + pickerButtonText + '</span>');
 
-            $(element).attr('autocomplete', 'off');
-
             this._setCurrentDate(element);
         },