ref: datetime-picker

EMS/admin-ui-bundle/_to_be_ref/js/editRevisionEventListeners.js

@@ -223,18 +223,6 @@ function editRevisionEventListeners(target, onChangeCallback = null){
         }
     });
 
-    target.find('.datetime-picker').each(function( ) {
-        let $element = $(this);
-        $element.unbind('change');
-        $element.datetimepicker({
-            keepInvalid: true, //otherwise daysOfWeekDisabled or disabledHours will not work!
-            extraFormats: [moment.ISO_8601]
-        });
-        if (onChangeCallback) {
-            $element.not(".ignore-ems-update").on('dp.change', onChangeCallback);
-        }
-    });
-
     target.find('.ems_daterangepicker').each(function( ) {
 
         const options = $(this).data('display-option');

EMS/admin-ui-bundle/assets/js/core/core.js

@@ -3,6 +3,7 @@ import Choice from './plugins/choice'
 import CodeEditor from './plugins/codeEditor'
 import CollapsibleCollection from './plugins/collapsibleCollection'
 import Datatable from './plugins/datatable'
+import Datetime from './plugins/datetime'
 import File from './plugins/file'
 import Form from './plugins/form'
 import Iframe from './plugins/iframe'
@@ -37,6 +38,7 @@ class Core {
       new CodeEditor(),
       new CollapsibleCollection(),
       new Datatable(),
+      new Datetime(),
       new File(),
       new Form(),
       new Iframe(),

EMS/admin-ui-bundle/assets/js/core/plugins/datetime.js

@@ -0,0 +1,42 @@
+import { TempusDominus } from '@eonasdan/tempus-dominus'
+import '@eonasdan/tempus-dominus/src/scss/tempus-dominus.scss'
+import ChangeEvent from '../events/changeEvent'
+
+class Datetime {
+  #iframes = []
+
+  load (target) {
+    const datetimePickers = target.querySelectorAll('.datetime-picker')
+    for (let i = 0; i < datetimePickers.length; i++) {
+      const picker = new TempusDominus(datetimePickers[i], {
+        display: {
+          buttons: {
+            today: true,
+            clear: true,
+            close: true
+          }
+        },
+        localization: {
+          format: datetimePickers[i].dataset.dateFormat,
+          startOfTheWeek: 1
+        },
+        restrictions: {
+          daysOfWeekDisabled: JSON.parse(datetimePickers[i].dataset.dateDaysOfWeekDisabled),
+          disabledHours: JSON.parse(datetimePickers[i].dataset.dateDisabledHours)
+        }
+      })
+      if (datetimePickers[i].dataset.dateLocale) {
+        picker.locale(datetimePickers[i].dataset.dateLocale)
+      }
+      datetimePickers[i].addEventListener('change.td', function () {
+        if (datetimePickers[i].classList.contains('ignore-ems-update')) {
+          return
+        }
+        const event = new ChangeEvent(datetimePickers[i])
+        event.dispatch()
+      })
+    }
+  }
+}
+
+export default Datetime

EMS/admin-ui-bundle/package.json

@@ -33,6 +33,7 @@
     "@ckeditor/ckeditor5-dev-utils": "^39.5.1",
     "@ckeditor/ckeditor5-theme-lark": "^40.2.0",
     "@elasticms/file-uploader": "^1.0.1",
+    "@eonasdan/tempus-dominus": "^6.9.5",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@popperjs/core": "^2.11.8",
     "ace-builds": "^1.32.3",