add start_date support in js

Author: tischsoic

src/bundle/Resources/public/js/scripts/core/date.time.range.single.js

@@ -3,15 +3,14 @@ import { setInstance } from '../helpers/object.instances';
 
 const { ibexa, document } = window;
 
-const SECONDS_IN_DAY = 86400;
-
 class DateTimeRangeSingle {
     constructor(config) {
         this.container = config.container;
         this.dateTimePickerInputWrapper = this.container.querySelector('.ibexa-date-time-range-single__date-time-picker-input-wrapper');
 
-        const { periodSelector, endSelector } = this.container.dataset;
+        const { periodSelector, startSelector, endSelector } = this.container.dataset;
         this.periodInput = document.querySelector(periodSelector);
+        this.startInput = document.querySelector(startSelector);
         this.endInput = document.querySelector(endSelector);
 
         const customDateConfig = config.dateConfig || {};
@@ -37,19 +36,22 @@ class DateTimeRangeSingle {
         if (dates.length === 2) {
             const startDate = this.getUnixTimestampUTC(dates[0]);
             const endDate = this.getUnixTimestampUTC(dates[1]);
-            const days = Math.floor((endDate - startDate) / SECONDS_IN_DAY);
 
-            this.periodInput.value = `P0Y0M${days}D`;
+            this.periodInput.value = '';
             this.periodInput.dispatchEvent(new Event('change'));
             this.periodInput.dispatchEvent(new Event('input'));
 
+            this.startInput.value = startDate;
+            this.startInput.dispatchEvent(new Event('change'));
+            this.startInput.dispatchEvent(new Event('input'));
+
             this.endInput.value = endDate;
             this.endInput.dispatchEvent(new Event('change'));
             this.endInput.dispatchEvent(new Event('input'));
         } else if (dates.length === 0) {
-            this.periodInput.value = '';
-            this.periodInput.dispatchEvent(new Event('change'));
-            this.periodInput.dispatchEvent(new Event('input'));
+            this.startInput.value = '';
+            this.startInput.dispatchEvent(new Event('change'));
+            this.startInput.dispatchEvent(new Event('input'));
 
             this.endInput.value = '';
             this.endInput.dispatchEvent(new Event('change'));

src/bundle/Resources/views/themes/admin/ui/component/date_time_range_single/date_time_range_single.twig

@@ -5,6 +5,7 @@
         ~ (is_hidden|default(false) ? 'ibexa-date-time-range-single--hidden ')
         ~ attr.class|default(''))|trim,
     'data-period-selector': period_input_selector,
+    'data-start-selector': start_input_selector,
     'data-end-selector': end_input_selector,
     'data-start': start_date is defined and start_date is not null
         ? start_date|date('Y-m-d H:i:s') : '',

src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig

@@ -334,6 +334,7 @@
         start_date: form.parent.vars.data.lastModified.start_date|default(null),
         end_date: form.parent.vars.data.lastModified.end_date|default(null),
         period_input_selector: '#' ~ form.parent.last_modified.children.date_interval.vars.id,
+        start_input_selector: '#' ~ form.parent.last_modified.children.start_date.vars.id,
         end_input_selector: '#' ~ form.parent.last_modified.children.end_date.vars.id,
     } %}
 {%- endblock -%}
@@ -348,6 +349,7 @@
         start_date: form.parent.vars.data.created.start_date|default(null),
         end_date: form.parent.vars.data.created.end_date|default(null),
         period_input_selector: '#' ~ form.parent.created.children.date_interval.vars.id,
+        start_input_selector: '#' ~ form.parent.created.children.start_date.vars.id,
         end_input_selector: '#' ~ form.parent.created.children.end_date.vars.id,
     } %}
 {%- endblock -%}
@@ -362,6 +364,7 @@
         start_date: form.parent.vars.data.trashedInterval.start_date|default(null),
         end_date: form.parent.vars.data.trashedInterval.end_date|default(null),
         period_input_selector: '#' ~ form.parent.trashed_interval.children.date_interval.vars.id,
+        start_input_selector: '#' ~ form.parent.trashed_interval.children.start_date.vars.id,
         end_input_selector: '#' ~ form.parent.trashed_interval.children.end_date.vars.id,
     } %}
 {%- endblock -%}