Merge pull request #62 from ezsystems/ezp-27901-datetime-field

EZP-27901: As an Editor, I want to edit a DateAndTime field type with the new UI guidelines

src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js

@@ -0,0 +1,79 @@
+(function (global) {
+    const SELECTOR_FIELD = '.ez-field-edit--ezdatetime';
+    const SELECTOR_INPUT = '.ez-data-source__input[data-seconds]';
+    const EVENT_VALUE_CHANGED = 'valueChanged';
+
+    class EzDateTimeValidator extends global.eZ.BaseFieldValidator {
+        /**
+         * Validates the input
+         *
+         * @method validateInput
+         * @param {Event} event
+         * @returns {Object}
+         * @memberof EzDateTimeValidator
+         */
+        validateInput(event) {
+            const target = event.target;
+            const isRequired = target.required;
+            const isEmpty = !target.value.trim().length;
+            const label = event.target.closest(this.fieldSelector).querySelector('.ez-field-edit__label').innerHTML;
+            let isError = false;
+            let errorMessage = '';
+
+            if (isRequired && isEmpty) {
+                isError = true;
+                errorMessage = window.eZ.errors.emptyField.replace('{fieldName}', label);
+            }
+
+            return {
+                isError,
+                errorMessage
+            };
+        }
+    };
+
+    const validator = new EzDateTimeValidator({
+        classInvalid: 'is-invalid',
+        fieldSelector: SELECTOR_FIELD,
+        eventsMap: [
+            {
+                selector: `${SELECTOR_FIELD} ${SELECTOR_INPUT}`,
+                eventName: EVENT_VALUE_CHANGED,
+                callback: 'validateInput',
+                invalidStateSelectors: [SELECTOR_FIELD],
+                errorNodeSelectors: ['.ez-field-edit__label-wrapper'],
+            },
+        ],
+    });
+
+    validator.init();
+
+    const datetimeFields = [...document.querySelectorAll(SELECTOR_FIELD)];
+    const datetimeConfig = {
+        enableTime: true,
+        time_24hr: true,
+        formatDate: (date) => (new Date(date)).toLocaleString()
+    };
+    const updateInputValue = (sourceInput, date) => {
+        sourceInput.value = Math.floor((new Date(date)).getTime() / 1000);
+        sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED));
+    };
+    const initFlatPickr = (field) => {
+        const sourceInput = field.querySelector(SELECTOR_INPUT);
+        let defaultDate;
+
+        if (sourceInput.value) {
+            defaultDate = new Date(sourceInput.value * 1000);
+        }
+
+        sourceInput.classList.add('ez-data-source__input--visually-hidden');
+
+        flatpickr(field.querySelector('.flatpickr-input'), Object.assign({}, datetimeConfig, {
+            onChange: updateInputValue.bind(null, sourceInput),
+            defaultDate,
+            enableSeconds: !!parseInt(sourceInput.dataset.seconds, 10),
+        }));
+    };
+
+    datetimeFields.forEach(initFlatPickr);
+})(window);

src/bundle/Resources/views/content/content_edit.html.twig

@@ -6,7 +6,9 @@
         <div id="react-udw"></div>
         {{ form_start(form) }}
         {% for field in form.fieldsData -%}
-            {{- form_row(field) -}}
+            {% if field.vars.value is defined %}
+                {{- form_row(field.value) -}}
+            {% endif %}
         {%- endfor %}
         {{ form_end(form) }}
     </section>

src/bundle/Resources/views/fieldtypes/ezdatetime.html.twig

@@ -1,6 +1,4 @@
 {% block ezplatform_fieldtype_ezdatetime_widget %}
-    {% for child in form %}
-        {% set classes = 'ez-data-source__input ez-data-source__input--' ~ child.vars.name %}
-        {{ form_widget(child, {'attr': {'class': classes}}) }}
-    {% endfor %}
+    <input type="text" class="flatpickr flatpickr-input ez-data-source__input form-control" readonly="readonly">
+    {{ block('form_widget') }}
 {% endblock %}