[BUGFIX] Explicitly initialize DateTime picker for form fields

The InputDateTimeElement now takes an element identifier to initialize a
field as a date time picker. The DateTimePicker module now uses an
optional element identifier to render the date time picker.

Resolves: #89586
Related: #87324
Releases: master
Change-Id: I65727fe503fed65b28e38f64b1a44b619087b937
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/62197


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Johannes Schlier
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Johannes Schlier
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/DateTimePicker.ts

@@ -42,9 +42,9 @@ class DateTimePicker {
     return date.format();
   }
 
-  constructor() {
+  constructor(selector?: string) {
     $((): void => {
-      this.initialize();
+      this.initialize(selector);
     });
   }
 
@@ -53,9 +53,9 @@ class DateTimePicker {
    * note: this function can be called multiple times (e.g. after AJAX requests) because it only
    * applies to fields which haven't been used yet.
    */
-  private initialize(): void {
+  public initialize(selector?: string): void {
     // fetch the date time fields that haven't been initialized yet
-    const $dateTimeFields = $(this.fieldSelector).filter((index: number, element: HTMLElement): boolean => {
+    const $dateTimeFields = $(selector || this.fieldSelector).filter((index: number, element: HTMLElement): boolean => {
       return typeof $(element).data('DateTimePicker') === 'undefined';
     });
 

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/InputDateTimeElement.ts

@@ -15,13 +15,12 @@ import * as $ from 'jquery';
 import FormEngine = require('TYPO3/CMS/Backend/FormEngine');
 
 class InputDateTimeElement {
-  constructor() {
+  constructor(elementId: string) {
     $((): void => {
       this.registerEventHandler();
-
-      if (document.querySelectorAll('.t3js-datetimepicker').length) {
-        require(['../../DateTimePicker']);
-      }
+      require(['../../DateTimePicker'], (DateTimePicker: any): void => {
+        DateTimePicker.initialize('#' + elementId)
+      });
     });
   }
 
@@ -34,4 +33,4 @@ class InputDateTimeElement {
   }
 }
 
-export = new InputDateTimeElement();
+export = InputDateTimeElement;

typo3/sysext/backend/Classes/Form/Element/InputDateTimeElement.php

@@ -124,9 +124,10 @@ class InputDateTimeElement extends AbstractFormElement
             return $resultArray;
         }
 
+        $fieldId = StringUtility::getUniqueId('formengine-input-');
         $attributes = [
             'value' => '',
-            'id' => StringUtility::getUniqueId('formengine-input-'),
+            'id' => $fieldId,
             'class' => implode(' ', [
                 't3js-datetimepicker',
                 'form-control',
@@ -270,7 +271,11 @@ class InputDateTimeElement extends AbstractFormElement
             $fullElement = implode(LF, $fullElement);
         }
 
-        $resultArray['requireJsModules'][] = 'TYPO3/CMS/Backend/FormEngine/Element/InputDateTimeElement';
+        $resultArray['requireJsModules'][] = ['TYPO3/CMS/Backend/FormEngine/Element/InputDateTimeElement' => '
+            function(InputDateTimeElement) {
+                new InputDateTimeElement(' . GeneralUtility::quoteJSvalue($fieldId) . ');
+            }'
+        ];
         $resultArray['html'] = '<div class="formengine-field-item t3js-formengine-field-item">' . $fieldInformationHtml . $fullElement . '</div>';
         return $resultArray;
     }

typo3/sysext/backend/Resources/Public/JavaScript/DateTimePicker.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","moment","./Storage/Persistent"],function(e,t,a,i,r){"use strict";class o{constructor(){this.fieldSelector=".t3js-datetimepicker",this.format=(null!=opener&&void 0!==opener.top.TYPO3?opener.top:top).TYPO3.settings.DateTimePicker.DateFormat,a(()=>{this.initialize()})}static formatDateForHiddenField(e,t){return"time"!==t&&"timesec"!==t||e.year(1970).month(0).date(1),e.format()}initialize(){const t=a(this.fieldSelector).filter((e,t)=>void 0===a(t).data("DateTimePicker"));t.length>0&&e(["twbs/bootstrap-datetimepicker"],()=>{let e=r.get("lang");"ch"===e&&(e="zh-cn");const d=!!e&&i.locale(e);t.each((e,t)=>{this.initializeField(a(t),d)}),t.on("blur",e=>{const t=a(e.currentTarget),r=t.parent().parent().find('input[type="hidden"]');if(""===t.val())r.val("");else{const e=t.data("dateType"),a=t.data("DateTimePicker").format(),d=i.utc(t.val(),a);d.isValid()?r.val(o.formatDateForHiddenField(d,e)):t.val(o.formatDateForHiddenField(i.utc(r.val()),e))}}),t.on("dp.change",e=>{const t=a(e.currentTarget),i=t.parent().parent().find("input[type=hidden]"),r=t.data("dateType");let d="";""!==t.val()&&(d=o.formatDateForHiddenField(e.date.utc(),r)),i.val(d),a(document).trigger("formengine.dp.change",[t])})})}initializeField(e,t){const a=this.format,r={format:"",locale:"",sideBySide:!0,showTodayButton:!0,toolbarPlacement:"bottom",icons:{time:"fa fa-clock-o",date:"fa fa-calendar",up:"fa fa-chevron-up",down:"fa fa-chevron-down",previous:"fa fa-chevron-left",next:"fa fa-chevron-right",today:"fa fa-calendar-o",clear:"fa fa-trash"}};switch(e.data("dateType")){case"datetime":r.format=a[1];break;case"date":r.format=a[0];break;case"time":r.format="HH:mm";break;case"timesec":r.format="HH:mm:ss";break;case"year":r.format="YYYY"}e.data("dateMindate")&&e.data("dateMindate",i.unix(e.data("dateMindate")).format(r.format)),e.data("dateMaxdate")&&e.data("dateMaxdate",i.unix(e.data("dateMaxdate")).format(r.format)),t&&(r.locale=t),e.datetimepicker(r)}}return new o});
\ No newline at end of file
+define(["require","exports","jquery","moment","./Storage/Persistent"],function(e,t,a,i,r){"use strict";class o{constructor(e){this.fieldSelector=".t3js-datetimepicker",this.format=(null!=opener&&void 0!==opener.top.TYPO3?opener.top:top).TYPO3.settings.DateTimePicker.DateFormat,a(()=>{this.initialize(e)})}static formatDateForHiddenField(e,t){return"time"!==t&&"timesec"!==t||e.year(1970).month(0).date(1),e.format()}initialize(t){const d=a(t||this.fieldSelector).filter((e,t)=>void 0===a(t).data("DateTimePicker"));d.length>0&&e(["twbs/bootstrap-datetimepicker"],()=>{let e=r.get("lang");"ch"===e&&(e="zh-cn");const t=!!e&&i.locale(e);d.each((e,i)=>{this.initializeField(a(i),t)}),d.on("blur",e=>{const t=a(e.currentTarget),r=t.parent().parent().find('input[type="hidden"]');if(""===t.val())r.val("");else{const e=t.data("dateType"),a=t.data("DateTimePicker").format(),d=i.utc(t.val(),a);d.isValid()?r.val(o.formatDateForHiddenField(d,e)):t.val(o.formatDateForHiddenField(i.utc(r.val()),e))}}),d.on("dp.change",e=>{const t=a(e.currentTarget),i=t.parent().parent().find("input[type=hidden]"),r=t.data("dateType");let d="";""!==t.val()&&(d=o.formatDateForHiddenField(e.date.utc(),r)),i.val(d),a(document).trigger("formengine.dp.change",[t])})})}initializeField(e,t){const a=this.format,r={format:"",locale:"",sideBySide:!0,showTodayButton:!0,toolbarPlacement:"bottom",icons:{time:"fa fa-clock-o",date:"fa fa-calendar",up:"fa fa-chevron-up",down:"fa fa-chevron-down",previous:"fa fa-chevron-left",next:"fa fa-chevron-right",today:"fa fa-calendar-o",clear:"fa fa-trash"}};switch(e.data("dateType")){case"datetime":r.format=a[1];break;case"date":r.format=a[0];break;case"time":r.format="HH:mm";break;case"timesec":r.format="HH:mm:ss";break;case"year":r.format="YYYY"}e.data("dateMindate")&&e.data("dateMindate",i.unix(e.data("dateMindate")).format(r.format)),e.data("dateMaxdate")&&e.data("dateMaxdate",i.unix(e.data("dateMaxdate")).format(r.format)),t&&(r.locale=t),e.datetimepicker(r)}}return new o});
\ No newline at end of file

typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/InputDateTimeElement.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","TYPO3/CMS/Backend/FormEngine"],function(e,r,n,t){"use strict";return new class{constructor(){n(()=>{this.registerEventHandler(),document.querySelectorAll(".t3js-datetimepicker").length&&e(["../../DateTimePicker"])})}registerEventHandler(){n(document).on("formengine.dp.change",(e,r)=>{t.Validation.validate(),t.Validation.markFieldAsChanged(r),n(".module-docheader-bar .btn").removeClass("disabled").prop("disabled",!1)})}}});
\ No newline at end of file
+define(["require","exports","jquery","TYPO3/CMS/Backend/FormEngine"],function(e,i,r,n){"use strict";return class{constructor(i){r(()=>{this.registerEventHandler(),e(["../../DateTimePicker"],e=>{e.initialize("#"+i)})})}registerEventHandler(){r(document).on("formengine.dp.change",(e,i)=>{n.Validation.validate(),n.Validation.markFieldAsChanged(i),r(".module-docheader-bar .btn").removeClass("disabled").prop("disabled",!1)})}}});
\ No newline at end of file