From 115b4b74a312981945da6172c96b3638f2c3037c Mon Sep 17 00:00:00 2001 From: Jeroen De Meerleer Date: Wed, 13 Apr 2022 15:32:59 +0200 Subject: [PATCH] BUGFIX: datetimepicker opted for different approach into parsing and displaying Or did you think that test-software never changed? --- assets/js/job/add.js | 30 ++++++++---------------------- assets/js/job/index.js | 8 ++++---- assets/js/job/momentjs-parse.js | 19 +++++++++++++++++++ assets/js/job/view.js | 2 +- package-lock.json | 16 +++++++++++++++- package.json | 3 ++- 6 files changed, 49 insertions(+), 29 deletions(-) create mode 100644 assets/js/job/momentjs-parse.js diff --git a/assets/js/job/add.js b/assets/js/job/add.js index e795b0f..1687bd4 100644 --- a/assets/js/job/add.js +++ b/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() diff --git a/assets/js/job/index.js b/assets/js/job/index.js index c0352c0..a419f86 100644 --- a/assets/js/job/index.js +++ b/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'); diff --git a/assets/js/job/momentjs-parse.js b/assets/js/job/momentjs-parse.js new file mode 100644 index 0000000..0e6c5f3 --- /dev/null +++ b/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); + } +} + diff --git a/assets/js/job/view.js b/assets/js/job/view.js index 6cc0538..6a836b5 100644 --- a/assets/js/job/view.js +++ b/assets/js/job/view.js @@ -1,4 +1,4 @@ -import 'bootstrap'; +const bootstrap = require('bootstrap'); document.addEventListener("readystatechange", event => { if(event.target.readyState === 'complete') { diff --git a/package-lock.json b/package-lock.json index a60c22e..2dbd3ee 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 300609a..3fd58fb 100644 --- a/package.json +++ b/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",