BUGFIX: datetimepicker opted for different approach into parsing and displaying

Or did you think that test-software never changed?

assets/js/job/add.js

@@ -1,5 +1,7 @@
-import 'bootstrap';
-import {TempusDominus,DateTime} from '@eonasdan/tempus-dominus/dist/js/tempus-dominus';
+const bootstrap = require('bootstrap');
+const moment = require('moment');
+const tempusDominus = require('@eonasdan/tempus-dominus');
+const momentparse = require('./momentjs-parse')
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
@@ -35,29 +37,13 @@ const timepickerOptions = {
             useTwentyfourHour: true
         }
     },
-    hooks: { inputFormat: (context, date) => {
-            return date.getDate().toString().padStart(2, '0') + '/' +
-                (date.getMonth() + 1).toString().padStart(2, '0') + '/' +
-                date.getFullYear().toString().padStart(2, '0') + ' '  +
-                date.getHours().toString().padStart(2, '0') + ':'  +
-                date.getMinutes().toString().padStart(2, '0') + ':' +
-                date.getSeconds().toString().padStart(2, '0')
-        },
-        inputParse: (context, value) => {
-            let day = parseInt(value.substring(0,2));
-            let month = parseInt(value.substring(3,5)) - 1;
-            let year = parseInt(value.substring(6,10));
-            let hour = parseInt(value.substring(11,13));
-            let min = parseInt(value.substring(14,16));
-            let sec = parseInt(value.substring(17,19));
-            return new DateTime(year, month, day, hour, min, sec, 0).setLocale('en');
-        }
-    }
 }
 function initDatePickers()
 {
-    new TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
-    new TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);
+
+    tempusDominus.extend(momentparse, 'DD/MM/yyyy HH:mm:ss');
+    new tempusDominus.TempusDominus(document.querySelector('#nextrunselector'), timepickerOptions);
+    new tempusDominus.TempusDominus(document.querySelector('#lastrunselector'), timepickerOptions);
 }
 
 function initCronType()

assets/js/job/index.js

@@ -1,5 +1,5 @@
-import { Modal } from 'bootstrap';
-import * as image from '../../images/ajax-loader.gif';
+const bootstrap = require('bootstrap');
+const image = require('../../images/ajax-loader.gif');
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {
@@ -41,7 +41,7 @@ function initRunNowButtons() {
         let runnowCnt = document.querySelector('.runnow-content');
         if(runnowCnt.querySelector('img') === null) {
             let loaderImg = document.createElement('img');
-            loaderImg.src = image.default;
+            loaderImg.src = image;
             runnowCnt.appendChild(loaderImg);
         }
         document.querySelector('.container-fluid').classList.add('blur');
@@ -76,7 +76,7 @@ function initRunNowButtons() {
                     modal.querySelector('.modal-body').innerHTML = content;
                 }
 
-                var bsModal = new Modal('#runnow_result').show();
+                var bsModal = new bootstrap.Modal('#runnow_result').show();
 
                 document.querySelector('.container-fluid').classList.remove('blur');
                 document.querySelector('.runnow-overlay').classList.remove('d-block');

assets/js/job/momentjs-parse.js

@@ -0,0 +1,19 @@
+const moment = require('moment');
+//obviously, loading moment js is required.
+export const load = (option, tdClasses, tdFactory) => {
+    tdClasses.Dates.prototype.setFromInput = function(value, index) {
+        let converted = moment(value, option);
+        if (converted.isValid()) {
+            let date = tdFactory.DateTime.convert(converted.toDate(), this.optionsStore.options.localization.locale);
+            this.setValue(date, index);
+        }
+        else {
+            console.warn('Momentjs failed to parse the input date.');
+        }
+    }
+
+    tdClasses.Dates.prototype.formatInput = function(date) {
+        return moment(date).format(option);
+    }
+}
+

assets/js/job/view.js

@@ -1,4 +1,4 @@
-import 'bootstrap';
+const bootstrap = require('bootstrap');
 
 document.addEventListener("readystatechange", event => {
     if(event.target.readyState === 'complete') {

package-lock.json

@@ -12,7 +12,8 @@
         "@eonasdan/tempus-dominus": "^6.0.0-beta1",
         "@popperjs/core": "^2.11.2",
         "bootstrap": "^5.1.3",
-        "bootstrap-dark-5": "^1.1.3"
+        "bootstrap-dark-5": "^1.1.3",
+        "moment": "^2.29.2"
       },
       "devDependencies": {
         "@symfony/webpack-encore": "^1.8.1",
@@ -5107,6 +5108,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
+      "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -11880,6 +11889,11 @@
         "minimist": "^1.2.6"
       }
     },
+    "moment": {
+      "version": "2.29.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.2.tgz",
+      "integrity": "sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -9,7 +9,8 @@
     "@eonasdan/tempus-dominus": "^6.0.0-beta1",
     "@popperjs/core": "^2.11.2",
     "bootstrap": "^5.1.3",
-    "bootstrap-dark-5": "^1.1.3"
+    "bootstrap-dark-5": "^1.1.3",
+    "moment": "^2.29.2"
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^1.8.1",