From 205c66913907f111f49065305a2c0ce4b97be4e0 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 3 Oct 2024 17:25:23 +0200
Subject: [PATCH 01/35] Created new DateTimePicker component (empty)

---
 index.html                                    |   9 ++
 .../dateTimePicker/DateTimePicker.js          | 127 ++++++++++++++++++
 .../dateTimePicker/default-/default-.css      |   2 +
 .../dateTimePicker/default-/default-.html     |   3 +
 4 files changed, 141 insertions(+)
 create mode 100644 src/es/components/molecules/dateTimePicker/DateTimePicker.js
 create mode 100644 src/es/components/molecules/dateTimePicker/default-/default-.css
 create mode 100644 src/es/components/molecules/dateTimePicker/default-/default-.html

diff --git a/index.html b/index.html
index 1887e8cfa..6ecbf9a26 100644
--- a/index.html
+++ b/index.html
@@ -447,6 +447,15 @@ <h3>DialogClipboard</h3>
       </ul>
     `
   </script>
+  <h3>DateTimePicker</h3>
+  <div id=dateTimePicker></div>
+  <script>
+    document.querySelector('#dateTimePicker').innerHTML = /* HTML */`
+       <ul>
+         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dateTimePicker/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/dateTimePicker/default-/default-.html>"default-" Plain</a></li>
+       </ul>
+     `
+  </script>
   <h1>Organisms</h1>
   <h3>Wrapper</h3>
   <div id=wrapper></div>
diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
new file mode 100644
index 000000000..59f4a5ea7
--- /dev/null
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -0,0 +1,127 @@
+// @ts-check
+import { Mutation } from '../../prototypes/Mutation.js'
+
+/**
+ * Navigation hosts uls
+ * Example at: /src/es/components/pages/Home.html
+ * As a molecule, this component shall hold Atoms
+ *
+ * @export
+ * @class DateTimePicker
+ * @type {CustomElementConstructor}
+ * @attribute {
+ * }
+ */
+
+export default class DateTimePicker extends Mutation() {
+  constructor(options = {}, ...args) {
+    super({
+      importMetaUrl: import.meta.url,
+      mutationObserverInit: { attributes: true, attributeFilter: ['aria-expanded'] },
+      ...options
+    }, ...args)
+    this.pickerType = this.getAttribute("picker-type")
+    this.pickerPattern = this.getAttribute("picker-pattern")
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    if (this.shouldRenderCSS()) this.renderCSS()
+    if (this.shouldRenderHTML()) this.renderHTML()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+  }
+
+  /**
+   * evaluates if a render is necessary
+   *
+   * @return {boolean}
+   */
+  shouldRenderCSS() {
+    return !this.root.querySelector(`${this.cssSelector} > style[_css]`)
+  }
+
+  /**
+   * evaluates if a render is necessary
+   *
+   * @return {boolean}
+   */
+  shouldRenderHTML() {
+    return !this.root.querySelector('input')
+  }
+
+  /**
+   * renders the m-multi-level-navigation css
+   *
+   * @return {Promise<void>|void}
+   */
+  renderCSS() {
+    this.css = /* css */`
+    :host { }
+    `
+    return this.fetchTemplate()
+  }
+
+  /**
+   * fetches the template
+   *
+   * @return {Promise<void>}
+   */
+  fetchTemplate() {
+    /** @type {import('../../prototypes/Shadow.js').fetchCSSParams[]} */
+    const styles = [
+      {
+        path: `${this.importMetaUrl}../../../../css/reset.css`, // no variables for this reason no namespace
+        namespace: false
+      },
+      {
+        path: `${this.importMetaUrl}../../../../css/style.css`, // apply namespace and fallback to allow overwriting on deeper level
+        namespaceFallback: true
+      }
+    ]
+    switch (this.getAttribute('namespace')) {
+      case 'date-time-picker-default-':
+        return this.fetchCSS([{
+          path: `${this.importMetaUrl}./default-/default-.css`, // apply namespace since it is specific and no fallback
+          namespace: false,
+          replaces: [{
+            pattern: '--date-time-picker-default-',
+            flags: 'g',
+            replacement: '--date-time-picker-default-'
+          }]
+        }, ...styles], false)
+      default:
+        return Promise.resolve()
+    }
+  }
+
+  /**
+   *
+   *
+   * @return {Promise<void>|void}
+   */
+  renderHTML() {
+    let inputField = document.createElement('input')
+    if (this.pickerPattern) inputField.setAttribute('pattern', this.pickerPattern)
+    if (this.pickerType === 'birth') {
+      this.html = inputField
+    } else {
+
+    }
+    return
+  }
+
+  /**
+   *
+   *
+   * @param {'mobile' | 'desktop'} [media=this.getAttribute('media')]
+   * @returns {boolean}
+   * @memberof IntersectionScrollEffect
+   */
+  checkMedia(media = this.getAttribute('media')) {
+    const isMobile = self.matchMedia(`(max-width: ${this.mobileBreakpoint})`).matches
+    return (isMobile ? 'mobile' : 'desktop') === media
+  }
+}
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.css b/src/es/components/molecules/dateTimePicker/default-/default-.css
new file mode 100644
index 000000000..dc9093b45
--- /dev/null
+++ b/src/es/components/molecules/dateTimePicker/default-/default-.css
@@ -0,0 +1,2 @@
+:host {
+}
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.html b/src/es/components/molecules/dateTimePicker/default-/default-.html
new file mode 100644
index 000000000..5ae8e2d81
--- /dev/null
+++ b/src/es/components/molecules/dateTimePicker/default-/default-.html
@@ -0,0 +1,3 @@
+<m-date-time-picker picker-type="birth" picker-pattern="\d{1,2}/\d{1,2}/\d{4}">
+
+</m-date-time-picker>
\ No newline at end of file

From b95e67778635ac21eefbd5e1395474a74e3abb9d Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 4 Oct 2024 16:04:57 +0200
Subject: [PATCH 02/35] created obj to keep data of current state

---
 .../dateTimePicker/DateTimePicker.js          | 86 +++++++++++++++----
 .../dateTimePicker/default-/default-.html     |  2 +-
 2 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 59f4a5ea7..814147dce 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -1,5 +1,6 @@
 // @ts-check
-import { Mutation } from '../../prototypes/Mutation.js'
+// @ts-check
+import { Shadow } from '../../prototypes/Shadow.js'
 
 /**
  * Navigation hosts uls
@@ -13,25 +14,75 @@ import { Mutation } from '../../prototypes/Mutation.js'
  * }
  */
 
-export default class DateTimePicker extends Mutation() {
+export default class DateTimePicker extends Shadow() {
   constructor(options = {}, ...args) {
-    super({
-      importMetaUrl: import.meta.url,
-      mutationObserverInit: { attributes: true, attributeFilter: ['aria-expanded'] },
-      ...options
-    }, ...args)
+    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+    // TODO create warning if picker-type doesn't exist
     this.pickerType = this.getAttribute("picker-type")
-    this.pickerPattern = this.getAttribute("picker-pattern")
+    // TODO create warning if picker-format doesn't exist
+    this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
+    this.pickerFormatChar = "/"
+    this.splittedFormat = this.getSplittedFormat(this.pickerFormat)
+    // TODO fill out if it has default value
+    this.dateState = {
+      d: '',
+      m: '',
+      y: ''
+    }
+
+    this.formAsPattern = (event) => {
+      const currentInput = event.data
+      const currentValue = this.inputField.value
+      const currentValueLength = currentValue.length
+      let currentValueLengthAsIndex = currentValue.length - 1
+
+
+      // from here
+      if (currentInput === null) {
+        console.log('delete', this.pickerFormat[currentValueLength])
+        if (this.pickerFormat[currentValueLength] === this.pickerFormatChar) {
+          console.log('dont remove')
+        }
+      } else if (currentValue.length > 0 && this.pickerFormat[currentValueLengthAsIndex] === 'd') {
+        this.dateState.d = this.dateState.d + currentInput
+      } else if (this.pickerFormat[currentValueLengthAsIndex] === 'm') {
+        console.log("m")
+      } else if (this.pickerFormat[currentValueLengthAsIndex] === 'y') {
+        console.log("y")
+      } else {
+        console.log('other')
+        console.log('other', this.dateState)
+
+      }
+    }
+
+    this.setNotAllowedKeys = (event) => {
+      const keyCode = event.which
+      if (keyCode == 32) {
+        event.preventDefault()
+        return false
+      }
+      else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
+        event.preventDefault()
+        return false
+      }
+    }
   }
 
   connectedCallback() {
     super.connectedCallback()
     if (this.shouldRenderCSS()) this.renderCSS()
     if (this.shouldRenderHTML()) this.renderHTML()
+    if (this.inputField) this.inputField.addEventListener('keypress', this.setNotAllowedKeys)
+    if (this.inputField) this.inputField.addEventListener('input', this.formAsPattern)
+
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
+    if (this.inputField) this.inputField.removeEventListener('keypress', this.setNotAllowedKeys)
+    if (this.inputField) this.inputField.removeEventListener('input', this.formAsPattern)
+
   }
 
   /**
@@ -113,15 +164,14 @@ export default class DateTimePicker extends Mutation() {
     return
   }
 
-  /**
-   *
-   *
-   * @param {'mobile' | 'desktop'} [media=this.getAttribute('media')]
-   * @returns {boolean}
-   * @memberof IntersectionScrollEffect
-   */
-  checkMedia(media = this.getAttribute('media')) {
-    const isMobile = self.matchMedia(`(max-width: ${this.mobileBreakpoint})`).matches
-    return (isMobile ? 'mobile' : 'desktop') === media
+  getSplittedFormat = (format) => {
+    if (format.includes('/')) return this.pickerFormatChar = '/', format.split('/')
+    if (format.includes('.')) return this.pickerFormatChar = '.', format.split('.')
+    if (format.includes('-')) return this.pickerFormatChar = '-', format.split('-')
+    return
+  }
+
+  get inputField() {
+    return this.root.querySelector('input')
   }
 }
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.html b/src/es/components/molecules/dateTimePicker/default-/default-.html
index 5ae8e2d81..ecd176630 100644
--- a/src/es/components/molecules/dateTimePicker/default-/default-.html
+++ b/src/es/components/molecules/dateTimePicker/default-/default-.html
@@ -1,3 +1,3 @@
-<m-date-time-picker picker-type="birth" picker-pattern="\d{1,2}/\d{1,2}/\d{4}">
+<m-date-time-picker picker-type="birth" picker-format="dd.mm.yyyy">
 
 </m-date-time-picker>
\ No newline at end of file

From 219c09abd4d4fd71da8526f58c0b1ce0fec6a3ae Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 4 Oct 2024 16:51:29 +0200
Subject: [PATCH 03/35] Added next char checker

---
 .../dateTimePicker/DateTimePicker.js          | 58 ++++++++++++-------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 814147dce..533f46260 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -31,29 +31,26 @@ export default class DateTimePicker extends Shadow() {
     }
 
     this.formAsPattern = (event) => {
-      const currentInput = event.data
-      const currentValue = this.inputField.value
-      const currentValueLength = currentValue.length
-      let currentValueLengthAsIndex = currentValue.length - 1
+      this.currentInput = event.data
+      this.currentValue = this.inputField.value
+      this.currentValueLength = this.currentValue.length
+      this.currentValueLengthAsIndex = this.currentValue.length - 1
 
 
       // from here
-      if (currentInput === null) {
-        console.log('delete', this.pickerFormat[currentValueLength])
-        if (this.pickerFormat[currentValueLength] === this.pickerFormatChar) {
-          console.log('dont remove')
-        }
-      } else if (currentValue.length > 0 && this.pickerFormat[currentValueLengthAsIndex] === 'd') {
-        this.dateState.d = this.dateState.d + currentInput
-      } else if (this.pickerFormat[currentValueLengthAsIndex] === 'm') {
-        console.log("m")
-      } else if (this.pickerFormat[currentValueLengthAsIndex] === 'y') {
-        console.log("y")
+      if (this.currentValue.length > 0 && this.pickerFormat[this.currentValueLengthAsIndex] === 'd') {
+        this.dateState.d = this.dateState.d + this.currentInput
+        this.checkNextChar()
+      } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'm') {
+        this.dateState.m = this.dateState.m + this.currentInput
+        this.checkNextChar()
+      } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'y') {
+        this.dateState.y = this.dateState.y + this.currentInput
+        this.checkNextChar()
       } else {
-        console.log('other')
-        console.log('other', this.dateState)
-
+        return
       }
+      console.log("data", this.dateState)
     }
 
     this.setNotAllowedKeys = (event) => {
@@ -61,8 +58,19 @@ export default class DateTimePicker extends Shadow() {
       if (keyCode == 32) {
         event.preventDefault()
         return false
-      }
-      else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
+      } else if (keyCode == 8) {
+        // console.log("currentInput", this.currentInput)
+        // console.log("currentValue", this.currentValue)
+        // console.log("currentValueLength", this.currentValueLength)
+        // console.log("currentValueLengthAsIndex", this.currentValueLengthAsIndex)
+
+        if (this.currentInput === this.pickerFormatChar) {
+          this.inputField.setSelectionRange(this.currentValueLengthAsIndex, this.currentValueLengthAsIndex)
+          event.preventDefault()
+          return false
+        }
+
+      } else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
         event.preventDefault()
         return false
       }
@@ -73,14 +81,14 @@ export default class DateTimePicker extends Shadow() {
     super.connectedCallback()
     if (this.shouldRenderCSS()) this.renderCSS()
     if (this.shouldRenderHTML()) this.renderHTML()
-    if (this.inputField) this.inputField.addEventListener('keypress', this.setNotAllowedKeys)
+    if (this.inputField) this.inputField.addEventListener('keydown', this.setNotAllowedKeys)
     if (this.inputField) this.inputField.addEventListener('input', this.formAsPattern)
 
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
-    if (this.inputField) this.inputField.removeEventListener('keypress', this.setNotAllowedKeys)
+    if (this.inputField) this.inputField.removeEventListener('keydown', this.setNotAllowedKeys)
     if (this.inputField) this.inputField.removeEventListener('input', this.formAsPattern)
 
   }
@@ -171,6 +179,12 @@ export default class DateTimePicker extends Shadow() {
     return
   }
 
+  checkNextChar() {
+    if (this.pickerFormat[this.currentValueLength] && this.pickerFormat[this.currentValueLength] === this.pickerFormatChar) {
+      this.inputField.value = this.inputField.value + this.pickerFormatChar
+    }
+  }
+
   get inputField() {
     return this.root.querySelector('input')
   }

From 261483ddaf75620daedbdc6edab9ab1487d4b5f3 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Mon, 7 Oct 2024 14:35:37 +0200
Subject: [PATCH 04/35] Added maxlength attribute

---
 .../dateTimePicker/DateTimePicker.js          | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 533f46260..1a486c4e7 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -24,11 +24,11 @@ export default class DateTimePicker extends Shadow() {
     this.pickerFormatChar = "/"
     this.splittedFormat = this.getSplittedFormat(this.pickerFormat)
     // TODO fill out if it has default value
-    this.dateState = {
-      d: '',
-      m: '',
-      y: ''
-    }
+    // this.dateState = {
+    //   d: '',
+    //   m: '',
+    //   y: ''
+    // }
 
     this.formAsPattern = (event) => {
       this.currentInput = event.data
@@ -39,18 +39,19 @@ export default class DateTimePicker extends Shadow() {
 
       // from here
       if (this.currentValue.length > 0 && this.pickerFormat[this.currentValueLengthAsIndex] === 'd') {
-        this.dateState.d = this.dateState.d + this.currentInput
+        // this.dateState.d = this.dateState.d + this.currentInput
         this.checkNextChar()
       } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'm') {
-        this.dateState.m = this.dateState.m + this.currentInput
+        //this.dateState.m = this.dateState.m + this.currentInput
         this.checkNextChar()
       } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'y') {
-        this.dateState.y = this.dateState.y + this.currentInput
+        // this.dateState.y = this.dateState.y + this.currentInput
         this.checkNextChar()
       } else {
-        return
+        console.log("else")
+        //return
       }
-      console.log("data", this.dateState)
+      // console.log("data", this.dateState)
     }
 
     this.setNotAllowedKeys = (event) => {
@@ -59,15 +60,11 @@ export default class DateTimePicker extends Shadow() {
         event.preventDefault()
         return false
       } else if (keyCode == 8) {
-        // console.log("currentInput", this.currentInput)
-        // console.log("currentValue", this.currentValue)
-        // console.log("currentValueLength", this.currentValueLength)
-        // console.log("currentValueLengthAsIndex", this.currentValueLengthAsIndex)
-
-        if (this.currentInput === this.pickerFormatChar) {
-          this.inputField.setSelectionRange(this.currentValueLengthAsIndex, this.currentValueLengthAsIndex)
-          event.preventDefault()
-          return false
+        //console.log("char", this.pickerFormatChar)
+        if (this.currentValue.slice(-2, -1) === this.pickerFormatChar) {
+          // this.inputField.setSelectionRange(this.currentValue.length - 1, this.currentValue.length - 1)
+          // event.preventDefault()
+          //return false
         }
 
       } else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
@@ -163,7 +160,7 @@ export default class DateTimePicker extends Shadow() {
    */
   renderHTML() {
     let inputField = document.createElement('input')
-    if (this.pickerPattern) inputField.setAttribute('pattern', this.pickerPattern)
+    if (this.pickerFormat) inputField.setAttribute('maxlength', `${this.pickerFormat.length}`)
     if (this.pickerType === 'birth') {
       this.html = inputField
     } else {

From da7393bac781d5ac10c317011dcce0dd101384de Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 10 Oct 2024 16:24:04 +0200
Subject: [PATCH 05/35] WIP Adding new logic

---
 .../dateTimePicker/DateTimePicker.js          | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 1a486c4e7..bca52f39e 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -33,25 +33,21 @@ export default class DateTimePicker extends Shadow() {
     this.formAsPattern = (event) => {
       this.currentInput = event.data
       this.currentValue = this.inputField.value
+      this.currentSelectionStart = this.inputField.selectionStart
+      this.currentSelectionAsIndex = this.inputField.selectionStart - 1
       this.currentValueLength = this.currentValue.length
       this.currentValueLengthAsIndex = this.currentValue.length - 1
+      this.addedDay = ''
+      this.addedMonth = ''
+      this.addedYear = ''
 
 
-      // from here
-      if (this.currentValue.length > 0 && this.pickerFormat[this.currentValueLengthAsIndex] === 'd') {
-        // this.dateState.d = this.dateState.d + this.currentInput
-        this.checkNextChar()
-      } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'm') {
-        //this.dateState.m = this.dateState.m + this.currentInput
-        this.checkNextChar()
-      } else if (this.pickerFormat[this.currentValueLengthAsIndex] === 'y') {
-        // this.dateState.y = this.dateState.y + this.currentInput
-        this.checkNextChar()
-      } else {
-        console.log("else")
-        //return
-      }
-      // console.log("data", this.dateState)
+      console.log("currentSelectionStart", this.pickerFormat[this.currentSelectionAsIndex])
+
+      if (this.pickerFormat[this.currentSelectionAsIndex] === 'd') { }
+      else if (this.pickerFormat[this.currentSelectionAsIndex] === 'm') { }
+      else if (this.pickerFormat[this.currentSelectionAsIndex] === 'y') { }
+      else { }
     }
 
     this.setNotAllowedKeys = (event) => {
@@ -60,13 +56,6 @@ export default class DateTimePicker extends Shadow() {
         event.preventDefault()
         return false
       } else if (keyCode == 8) {
-        //console.log("char", this.pickerFormatChar)
-        if (this.currentValue.slice(-2, -1) === this.pickerFormatChar) {
-          // this.inputField.setSelectionRange(this.currentValue.length - 1, this.currentValue.length - 1)
-          // event.preventDefault()
-          //return false
-        }
-
       } else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
         event.preventDefault()
         return false
@@ -178,6 +167,7 @@ export default class DateTimePicker extends Shadow() {
 
   checkNextChar() {
     if (this.pickerFormat[this.currentValueLength] && this.pickerFormat[this.currentValueLength] === this.pickerFormatChar) {
+      console.log("checkNextChar()", this.pickerFormat[this.currentValueLength])
       this.inputField.value = this.inputField.value + this.pickerFormatChar
     }
   }

From b439cb9285bd108dae04b494224486cdde8a9869 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 11 Oct 2024 11:50:13 +0200
Subject: [PATCH 06/35] WIP Adding pattern logic

---
 .../dateTimePicker/DateTimePicker.js          | 84 ++++++++++++-------
 1 file changed, 55 insertions(+), 29 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index bca52f39e..4de22770e 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -23,60 +23,87 @@ export default class DateTimePicker extends Shadow() {
     this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
     this.pickerFormatChar = "/"
     this.splittedFormat = this.getSplittedFormat(this.pickerFormat)
-    // TODO fill out if it has default value
-    // this.dateState = {
-    //   d: '',
-    //   m: '',
-    //   y: ''
-    // }
+    this.customValidationObj = this.getAttribute("custom-validation-obj") || {
+      d: {
+        max: 31,
+        min: 1,
+        isValid: false,
+        errorMessage: 'Please add a valid day, between 1 and 31.'
+      },
+      m: {
+        max: 12,
+        min: 1,
+        isValid: false,
+        errorMessage: 'Please add a valid month, between 1 and 12.'
+      },
+      y: {
+        max: 2010,
+        min: 1900,
+        isValid: false,
+        errorMessage: 'Please add a valid year, between 1900 and 2010.'
+      },
+      isTouched: false,
+      isValid: false,
+      errorMessage: 'Please add a valid format as dd/mm/yyyy'
+    }
+
+    console.log("fpattern", this.pickerFormatChar, this.pickerFormatChar.charCodeAt(0))
 
     this.formAsPattern = (event) => {
       this.currentInput = event.data
       this.currentValue = this.inputField.value
       this.currentSelectionStart = this.inputField.selectionStart
-      this.currentSelectionAsIndex = this.inputField.selectionStart - 1
       this.currentValueLength = this.currentValue.length
-      this.currentValueLengthAsIndex = this.currentValue.length - 1
-      this.addedDay = ''
-      this.addedMonth = ''
-      this.addedYear = ''
-
-
-      console.log("currentSelectionStart", this.pickerFormat[this.currentSelectionAsIndex])
-
-      if (this.pickerFormat[this.currentSelectionAsIndex] === 'd') { }
-      else if (this.pickerFormat[this.currentSelectionAsIndex] === 'm') { }
-      else if (this.pickerFormat[this.currentSelectionAsIndex] === 'y') { }
-      else { }
+      this.checkNextChar()
+
+      // if remove
+      if (this.currentInput === null) {
+        if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length === this.currentSelectionStart) {
+          this.inputField.value = this.currentValue
+        }
+        else if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length > this.currentSelectionStart) {
+          this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
+          this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
+        }
+      }
     }
 
     this.setNotAllowedKeys = (event) => {
       const keyCode = event.which
-      if (keyCode == 32) {
+      if (event.key == this.pickerFormatChar) { }
+      else if (keyCode == 32) {
         event.preventDefault()
         return false
-      } else if (keyCode == 8) {
-      } else if (keyCode != 46 && (keyCode < 48 || keyCode > 57)) {
+      } else if (keyCode == 8 || keyCode == 37 || keyCode == 39 || keyCode == 46) {
+      } else if (keyCode < 48 || keyCode > 57) {
         event.preventDefault()
         return false
       }
     }
+
+    this.customValidation = (event) => {
+      console.log("event validation", event)
+    }
   }
 
   connectedCallback() {
     super.connectedCallback()
     if (this.shouldRenderCSS()) this.renderCSS()
     if (this.shouldRenderHTML()) this.renderHTML()
-    if (this.inputField) this.inputField.addEventListener('keydown', this.setNotAllowedKeys)
-    if (this.inputField) this.inputField.addEventListener('input', this.formAsPattern)
-
+    if (this.inputField) {
+      this.inputField.addEventListener('keydown', this.setNotAllowedKeys)
+      this.inputField.addEventListener('input', this.formAsPattern)
+      this.inputField.addEventListener('change', this.customValidation)
+    }
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
-    if (this.inputField) this.inputField.removeEventListener('keydown', this.setNotAllowedKeys)
-    if (this.inputField) this.inputField.removeEventListener('input', this.formAsPattern)
-
+    if (this.inputField) {
+      this.inputField.removeEventListener('keydown', this.setNotAllowedKeys)
+      this.inputField.removeEventListener('input', this.formAsPattern)
+      this.inputField.removeEventListener('change', this.customValidation)
+    }
   }
 
   /**
@@ -167,7 +194,6 @@ export default class DateTimePicker extends Shadow() {
 
   checkNextChar() {
     if (this.pickerFormat[this.currentValueLength] && this.pickerFormat[this.currentValueLength] === this.pickerFormatChar) {
-      console.log("checkNextChar()", this.pickerFormat[this.currentValueLength])
       this.inputField.value = this.inputField.value + this.pickerFormatChar
     }
   }

From 9b21f47cc882c541b01b180cb3ae5b4ba7e1f024 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 11 Oct 2024 15:55:47 +0200
Subject: [PATCH 07/35] Formating logic expanded

---
 .../dateTimePicker/DateTimePicker.js          | 57 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 4de22770e..fd307b7b5 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -22,6 +22,11 @@ export default class DateTimePicker extends Shadow() {
     // TODO create warning if picker-format doesn't exist
     this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
     this.pickerFormatChar = "/"
+    this.formIndexes = {
+      d: Array(),
+      m: Array(),
+      y: Array()
+    }
     this.splittedFormat = this.getSplittedFormat(this.pickerFormat)
     this.customValidationObj = this.getAttribute("custom-validation-obj") || {
       d: {
@@ -46,8 +51,7 @@ export default class DateTimePicker extends Shadow() {
       isValid: false,
       errorMessage: 'Please add a valid format as dd/mm/yyyy'
     }
-
-    console.log("fpattern", this.pickerFormatChar, this.pickerFormatChar.charCodeAt(0))
+    this.setFormIndexes()
 
     this.formAsPattern = (event) => {
       this.currentInput = event.data
@@ -65,6 +69,19 @@ export default class DateTimePicker extends Shadow() {
           this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
           this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
         }
+      } else if (this.currentInput === this.pickerFormatChar) {
+        if (this.pickerFormat[this.currentSelectionStart - 1] === 'd') {
+          this.formatInput('d')
+        }
+        else if (this.pickerFormat[this.currentSelectionStart - 1] === 'm') {
+          this.formatInput('m')
+        }
+        else if (this.pickerFormat[this.currentSelectionStart - 1] === 'y') {
+          this.formatInput('y')
+        }
+      } else if (this.pickerFormat.split('')[this.currentValue.length] === this.pickerFormatChar) {
+        // here further
+        console.log("hallo")
       }
     }
 
@@ -192,10 +209,44 @@ export default class DateTimePicker extends Shadow() {
     return
   }
 
-  checkNextChar() {
+  checkNextChar(formatCharTyped) {
     if (this.pickerFormat[this.currentValueLength] && this.pickerFormat[this.currentValueLength] === this.pickerFormatChar) {
       this.inputField.value = this.inputField.value + this.pickerFormatChar
     }
+    if (formatCharTyped && this.pickerFormat[this.currentValueLength + 1] === this.pickerFormatChar) {
+      this.inputField.value = this.inputField.value + this.pickerFormatChar
+    }
+  }
+
+  setFormIndexes() {
+    this.pickerFormat.split('').forEach((char, index) => {
+      if (char === 'd') this.formIndexes.d.push(index)
+      else if (char === 'm') this.formIndexes.m.push(index)
+      else if (char === 'y') this.formIndexes.y.push(index)
+    })
+  }
+
+  formatInput(dateType) {
+    this.currentValue.split('').forEach((char, index) => {
+      if (this.formIndexes[dateType].includes(index)) {
+        if (char === this.pickerFormatChar) {
+          let currentDateTypeValue = Array()
+          this.formIndexes[dateType].forEach(ind => {
+            if (this.currentValue[ind] === this.pickerFormatChar || !this.currentValue[ind]) {
+              currentDateTypeValue.unshift('0')
+            } else {
+              currentDateTypeValue.unshift(this.currentValue[ind])
+            }
+          })
+          let inputFieldValue = this.currentValue.split('')
+          this.formIndexes[dateType].forEach((ind, i) => {
+            inputFieldValue[ind] = currentDateTypeValue[i]
+          })
+          this.inputField.value = inputFieldValue.join('')
+          this.checkNextChar(true)
+        }
+      }
+    })
   }
 
   get inputField() {

From 8cfd869bf081732fdc97af06aeff70bcd972149c Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 15 Oct 2024 13:45:11 +0200
Subject: [PATCH 08/35] improved formatter logic

---
 .../molecules/dateTimePicker/DateTimePicker.js      | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index fd307b7b5..bf0d8b0c9 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -58,12 +58,18 @@ export default class DateTimePicker extends Shadow() {
       this.currentValue = this.inputField.value
       this.currentSelectionStart = this.inputField.selectionStart
       this.currentValueLength = this.currentValue.length
-      this.checkNextChar()
+
+      if (this.currentInput !== null) this.checkNextChar()
+      if (this.currentInput !== null && this.currentInput !== this.pickerFormatChar && this.pickerFormat.split('')[this.currentValue.length - 1] === this.pickerFormatChar) {
+        this.inputField.value = this.currentValue.slice(0, -1) + this.pickerFormatChar + this.currentValue.slice(-1)
+      }
 
       // if remove
       if (this.currentInput === null) {
         if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length === this.currentSelectionStart) {
           this.inputField.value = this.currentValue
+          // this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
+          // this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
         }
         else if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length > this.currentSelectionStart) {
           this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
@@ -79,9 +85,6 @@ export default class DateTimePicker extends Shadow() {
         else if (this.pickerFormat[this.currentSelectionStart - 1] === 'y') {
           this.formatInput('y')
         }
-      } else if (this.pickerFormat.split('')[this.currentValue.length] === this.pickerFormatChar) {
-        // here further
-        console.log("hallo")
       }
     }
 
@@ -99,7 +102,7 @@ export default class DateTimePicker extends Shadow() {
     }
 
     this.customValidation = (event) => {
-      console.log("event validation", event)
+      // console.log("event validation", event)
     }
   }
 

From c8c32a35f7ba7e70e1b6117f85581e905bbd9db2 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 15 Oct 2024 15:43:41 +0200
Subject: [PATCH 09/35] validation part I

---
 .../dateTimePicker/DateTimePicker.js          | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index bf0d8b0c9..bfd9ccbac 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -23,6 +23,7 @@ export default class DateTimePicker extends Shadow() {
     this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
     this.pickerFormatChar = "/"
     this.formIndexes = {
+      formatChar: Array(),
       d: Array(),
       m: Array(),
       y: Array()
@@ -32,28 +33,24 @@ export default class DateTimePicker extends Shadow() {
       d: {
         max: 31,
         min: 1,
-        isValid: false,
         errorMessage: 'Please add a valid day, between 1 and 31.'
       },
       m: {
         max: 12,
         min: 1,
-        isValid: false,
         errorMessage: 'Please add a valid month, between 1 and 12.'
       },
       y: {
         max: 2010,
         min: 1900,
-        isValid: false,
         errorMessage: 'Please add a valid year, between 1900 and 2010.'
       },
-      isTouched: false,
-      isValid: false,
       errorMessage: 'Please add a valid format as dd/mm/yyyy'
     }
     this.setFormIndexes()
 
     this.formAsPattern = (event) => {
+      this.customValidationObj.inTouched = true
       this.currentInput = event.data
       this.currentValue = this.inputField.value
       this.currentSelectionStart = this.inputField.selectionStart
@@ -102,7 +99,12 @@ export default class DateTimePicker extends Shadow() {
     }
 
     this.customValidation = (event) => {
-      // console.log("event validation", event)
+      if (this.customValidationObj.inTouched) {
+        let mainValidation = this.customMainValidator()
+        let dayValidation = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
+        let monthValidation = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
+        let yearValidation = this.customDateValidator('y', +this.customValidationObj.y.min, +this.customValidationObj.y.max)
+      }
     }
   }
 
@@ -226,6 +228,8 @@ export default class DateTimePicker extends Shadow() {
       if (char === 'd') this.formIndexes.d.push(index)
       else if (char === 'm') this.formIndexes.m.push(index)
       else if (char === 'y') this.formIndexes.y.push(index)
+      else if (char === this.pickerFormatChar) this.formIndexes.formatChar.push(index)
+
     })
   }
 
@@ -252,6 +256,33 @@ export default class DateTimePicker extends Shadow() {
     })
   }
 
+  customMainValidator() {
+    let mainValidation = true
+    this.formIndexes.formatChar.forEach(ind => {
+      if (this.inputField.value[ind] !== this.pickerFormatChar) mainValidation = false
+    })
+    if (this.inputField.value.length !== this.pickerFormat.length) mainValidation = false
+    return mainValidation
+  }
+
+  customDateValidator(type, min, max) {
+    let currentValueString = ''
+    let currentValueNumber = 0
+
+    this.formIndexes[type].forEach(ind => {
+      if (this.inputField.value[ind]) currentValueString = currentValueString + this.inputField.value[ind]
+    })
+
+    currentValueNumber = +currentValueString || 0
+
+    if (min <= currentValueNumber && currentValueNumber <= max) {
+      console.log("Passt")
+    } else {
+      console.log("FFFF")
+    }
+  }
+
+
   get inputField() {
     return this.root.querySelector('input')
   }

From bdd7be6b20778e94853dc6df7a6b5cb8d788f3e3 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 15 Oct 2024 15:46:49 +0200
Subject: [PATCH 10/35] Added placeholder

---
 .../components/molecules/dateTimePicker/DateTimePicker.js   | 6 +++++-
 .../molecules/dateTimePicker/default-/default-.html         | 3 +--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index bfd9ccbac..ac50ffc5b 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -198,7 +198,11 @@ export default class DateTimePicker extends Shadow() {
    */
   renderHTML() {
     let inputField = document.createElement('input')
-    if (this.pickerFormat) inputField.setAttribute('maxlength', `${this.pickerFormat.length}`)
+    if (this.pickerFormat) {
+      inputField.setAttribute('maxlength', `${this.pickerFormat.length}`)
+      inputField.setAttribute('placeholder', `${this.getAttribute("placeholder")}`)
+
+    }
     if (this.pickerType === 'birth') {
       this.html = inputField
     } else {
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.html b/src/es/components/molecules/dateTimePicker/default-/default-.html
index ecd176630..830b19698 100644
--- a/src/es/components/molecules/dateTimePicker/default-/default-.html
+++ b/src/es/components/molecules/dateTimePicker/default-/default-.html
@@ -1,3 +1,2 @@
-<m-date-time-picker picker-type="birth" picker-format="dd.mm.yyyy">
-
+<m-date-time-picker picker-type="birth" picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
 </m-date-time-picker>
\ No newline at end of file

From c19e85e104ee854629e8afbf63d3b638fa883761 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 17 Oct 2024 14:37:05 +0200
Subject: [PATCH 11/35] Added day,month,year validation

---
 .../dateTimePicker/DateTimePicker.js          | 40 ++++++++++++++-----
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index ac50ffc5b..c2649d225 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -100,10 +100,35 @@ export default class DateTimePicker extends Shadow() {
 
     this.customValidation = (event) => {
       if (this.customValidationObj.inTouched) {
-        let mainValidation = this.customMainValidator()
-        let dayValidation = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
-        let monthValidation = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
-        let yearValidation = this.customDateValidator('y', +this.customValidationObj.y.min, +this.customValidationObj.y.max)
+        let mainValid = this.customMainValidator()
+        let dayValid = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
+        let monthValid = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
+        let yearValid = this.customDateValidator('y', +this.customValidationObj.y.min, +this.customValidationObj.y.max)
+
+        if (this.root.querySelector('div.error-message-wrapper')) {
+          this.root.removeChild(this.root.querySelector('div.error-message-wrapper'))
+        }
+
+        let errorMessageWrapper = document.createElement('div')
+        errorMessageWrapper.classList.add('error-message-wrapper')
+        let errorMessageText = document.createElement('p')
+        errorMessageText.classList.add('error-message-text')
+        errorMessageWrapper.appendChild(errorMessageText)
+
+        if (!mainValid) {
+          errorMessageText.textContent = this.customValidationObj.errorMessage
+        } else if (!dayValid) {
+          errorMessageText.textContent = this.customValidationObj.d.errorMessage
+        } else if (!monthValid) {
+          errorMessageText.textContent = this.customValidationObj.m.errorMessage
+
+        } else if (!yearValid) {
+          errorMessageText.textContent = this.customValidationObj.y.errorMessage
+
+        } else {
+          errorMessageWrapper.removeChild(errorMessageText)
+        }
+        this.root.appendChild(errorMessageWrapper)
       }
     }
   }
@@ -279,11 +304,8 @@ export default class DateTimePicker extends Shadow() {
 
     currentValueNumber = +currentValueString || 0
 
-    if (min <= currentValueNumber && currentValueNumber <= max) {
-      console.log("Passt")
-    } else {
-      console.log("FFFF")
-    }
+    if (min <= currentValueNumber && currentValueNumber <= max) return true
+    else return false
   }
 
 

From 787f44421249716bdcc0e56890fc697c8b00a93c Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 17 Oct 2024 15:17:44 +0200
Subject: [PATCH 12/35] fixing remove function

---
 .../components/molecules/dateTimePicker/DateTimePicker.js  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index c2649d225..73985d185 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -106,6 +106,7 @@ export default class DateTimePicker extends Shadow() {
         let yearValid = this.customDateValidator('y', +this.customValidationObj.y.min, +this.customValidationObj.y.max)
 
         if (this.root.querySelector('div.error-message-wrapper')) {
+          this.classList.remove('error')
           this.root.removeChild(this.root.querySelector('div.error-message-wrapper'))
         }
 
@@ -116,16 +117,21 @@ export default class DateTimePicker extends Shadow() {
         errorMessageWrapper.appendChild(errorMessageText)
 
         if (!mainValid) {
+          this.classList.add('error')
           errorMessageText.textContent = this.customValidationObj.errorMessage
         } else if (!dayValid) {
+          this.classList.add('error')
           errorMessageText.textContent = this.customValidationObj.d.errorMessage
         } else if (!monthValid) {
+          this.classList.add('error')
           errorMessageText.textContent = this.customValidationObj.m.errorMessage
 
         } else if (!yearValid) {
+          this.classList.add('error')
           errorMessageText.textContent = this.customValidationObj.y.errorMessage
 
         } else {
+          this.classList.remove('error')
           errorMessageWrapper.removeChild(errorMessageText)
         }
         this.root.appendChild(errorMessageWrapper)
@@ -308,7 +314,6 @@ export default class DateTimePicker extends Shadow() {
     else return false
   }
 
-
   get inputField() {
     return this.root.querySelector('input')
   }

From f7dc11e578b626c3a082145c2b605991bd360eeb Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 17 Oct 2024 15:54:22 +0200
Subject: [PATCH 13/35] implementing into validation.js

---
 .../components/molecules/dateTimePicker/DateTimePicker.js  | 3 +++
 .../molecules/simpleForm/default-/formValidation.html      | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 73985d185..933158bc8 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -21,6 +21,9 @@ export default class DateTimePicker extends Shadow() {
     this.pickerType = this.getAttribute("picker-type")
     // TODO create warning if picker-format doesn't exist
     this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
+    this.isValidationFormElem = this.getAttribute("validation-form-usage") === 'true'
+    if (this.isValidationFormElem) this.validationFormWrapper = this.getRootNode().host // console.log("hi", this.getRootNode().host.setValidity())
+    // implementing into validation js
     this.pickerFormatChar = "/"
     this.formIndexes = {
       formatChar: Array(),
diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index 833288168..a5602c8b0 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -29,6 +29,13 @@
       "max-length": {"value": "10", "error-message": "Bitte maximum 10 Character eingeben."}
      }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" />
     </div>
+    <div>
+      <label for="Birtday">Birthday => required + date validation</label>
+      <br>
+      <m-date-time-picker validation-form-usage="true" name="birthday-datepicker" picker-type="birth"
+        picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
+      </m-date-time-picker>
+    </div>
     <div>
       <label for="Firstname">Vorname => required + min-length:3 </label>
       <input id="Firstname" data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},

From 350fb862d3aa00e51b42690c6cae7880450ab071 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Mon, 21 Oct 2024 16:29:01 +0200
Subject: [PATCH 14/35] WIP adding date-validation into Validation.js

---
 .../simpleForm/default-/formValidation.html   | 25 ++++++++++-
 src/es/components/prototypes/Validation.js    | 43 +++++++++++++------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index a5602c8b0..29a989f99 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -30,11 +30,32 @@
      }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" />
     </div>
     <div>
-      <label for="Birtday">Birthday => required + date validation</label>
+      <!-- <label for="Birtday">Birthday => required + date validation</label>
       <br>
       <m-date-time-picker validation-form-usage="true" name="birthday-datepicker" picker-type="birth"
         picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
-      </m-date-time-picker>
+      </m-date-time-picker> -->
+      <label for="birth">Birthday</label>
+      <input id="birth" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
+      "m": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
+      "y": {"max": "2010", "min": "1900", "error-message": "Please add a valid year, between 1900 and 2010."},
+      "pattern": {"mask-value": "dd.mm.yyyy", "error-message": "Please add a valid format as dd.mm.yyyy"}
+     }' type="text" value="" name="birth" placeholder="DD.MM.YYYY" autocomplete="off" />
+    </div>
+    <div>
+      <!-- <label for="Birtday">Birthday => required + date validation</label>
+      <br>
+      <m-date-time-picker validation-form-usage="true" name="birthday-datepicker" picker-type="birth"
+        picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
+      </m-date-time-picker> -->
+      <label for="birth2">Birthday 2</label>
+      <input id="birth2" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
+      "m": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
+      "y": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},
+      "pattern": {"mask-value": "dd/mm/yyyy", "error-message": "Please add a valid format as dd/mm/yyyy"}
+     }' type="text" value="" name="birth2" placeholder="DD/MM/YYYY" autocomplete="off" />
     </div>
     <div>
       <label for="Firstname">Vorname => required + min-length:3 </label>
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index ad256ebae..b52dd8f06 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -11,7 +11,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
    * @param {{ValidationInit: {level?: number|undefined, selector?: string|undefined}|undefined}} options
    * @param {*} args
    */
-  constructor (options = { ValidationInit: undefined }, ...args) {
+  constructor(options = { ValidationInit: undefined }, ...args) {
     super(options, ...args)
 
     this.validationValues = {}
@@ -132,7 +132,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
    *
    * @return {void}
    */
-  connectedCallback () {
+  connectedCallback() {
     super.connectedCallback()
     this.shouldValidateOnInitiate = this.root.querySelector('form').getAttribute('validate-on-initiate') === 'true'
     this.realTimeSubmitButton = this.root.querySelector('form').getAttribute('real-time-submit-button') === 'true'
@@ -141,7 +141,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     if (!this.hasAttribute('no-validation-error-css')) this.renderValidationCSS()
 
     if (this.allValidationNodes.length > 0) {
-      this.allValidationNodes.forEach(node => {
+      this.allValidationNodes.forEach((node, index) => {
         const currentNodeHasNewErrorReferencePoint = node.getAttribute('error-message-reference-point-changed') === 'true'
         const errorTextWrapper = node.hasAttribute('error-text-tag-name') ? document.createElement(node.getAttribute('error-text-tag-name')) : document.createElement('div')
         const nodeHasLiveValidation = node.getAttribute('live-input-validation') === 'true'
@@ -175,6 +175,11 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             })
           }
         }
+        if (node.hasAttribute('only-number-date-input') && !node.hasAttribute('node-index')) {
+          node.setAttribute('node-index', index)
+          this[`pickerFormat${index}`] = this.validationValues[node.getAttribute('name')].pattern['mask-value'] ?? 'dd/mm/yyyy'
+          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
+        }
       })
     }
 
@@ -215,7 +220,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
    *
    * @return {void}
    */
-  disconnectedCallback () {
+  disconnectedCallback() {
     super.disconnectedCallback()
     // @ts-ignore
     if (this.allValidationNodes.length > 0) {
@@ -239,6 +244,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             })
           }
         }
+        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
       })
     }
     if (this.submitButton) {
@@ -246,7 +252,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
   }
 
-  validator (validationRules, currentInput, inputFieldName) {
+  validator(validationRules, currentInput, inputFieldName) {
     const validationNames = Object.keys(validationRules) || []
     validationNames.forEach(validationName => {
       if (validationName === 'required') {
@@ -325,7 +331,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     })
   }
 
-  setValidity (inputFieldName, validationName, isValid, inputType) {
+  setValidity(inputFieldName, validationName, isValid, inputType) {
     this.validationValues[inputFieldName][validationName].isValid = isValid
     const currentValidatedInput = this.allValidationNodes?.find(node => node.getAttribute('name') === inputFieldName)
     const currentValidatedInputHasNewErrorReferencePoint = currentValidatedInput.getAttribute('error-message-reference-point-changed') === 'true'
@@ -386,7 +392,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
   }
 
-  validationPatternEnd (inputFieldName, validationName, currentValue) {
+  validationPatternEnd(inputFieldName, validationName, currentValue) {
     const validationMask = this.validationValues[inputFieldName][validationName]['mask-value']
     const validationMaskSplitted = validationMask.split('')
     const currentValueSplitted = currentValue.split('')
@@ -414,13 +420,13 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     return !isValuesValid.includes(false)
   }
 
-  scrollToFirstError () {
+  scrollToFirstError() {
     // @ts-ignore
     const firstNodeWithError = this.allValidationNodes.find(node => node.classList.contains('has-error'))
     firstNodeWithError.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }
 
-  checkIfFormValid () {
+  checkIfFormValid() {
     const allIsValidValue = []
     Object.keys(this.validationValues).forEach(key => {
       Object.keys(this.validationValues[key]).forEach(subKey => {
@@ -435,7 +441,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
   /**
 * renders the css
 */
-  renderValidationCSS () {
+  renderValidationCSS() {
     this.style.textContent = /* css */`
     :host .custom-error-text {
       margin: var(--error-border-radius, 3px 0 0 0);
@@ -462,7 +468,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.html = this.style
   }
 
-  get style () {
+  get style() {
     return (
       this._style ||
       (this._style = (() => {
@@ -483,7 +489,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
    * @param {HTMLElement} [root=document.documentElement]
    * @return {HTMLElement}
    */
-  static walksUpDomQuerySelector (el, selector, root = document.documentElement) {
+  static walksUpDomQuerySelector(el, selector, root = document.documentElement) {
     if (typeof el.matches === 'function' && el.matches(selector)) return el
     if (el.querySelector(selector)) return el.querySelector(selector)
     while ((el = el.parentNode || el.host || root) && el !== root) { // eslint-disable-line
@@ -492,4 +498,17 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
     return el
   }
+
+  setOnlyNumbersInputAllowedKeys = (event) => {
+    const keyCode = event.which
+    if (event.key == this.pickerFormatChar) { }
+    else if (keyCode == 32) {
+      event.preventDefault()
+      return false
+    } else if (keyCode == 8 || keyCode == 37 || keyCode == 39 || keyCode == 46) {
+    } else if (keyCode < 48 || keyCode > 57) {
+      event.preventDefault()
+      return false
+    }
+  }
 }

From ce98356bd45a1e9686d4074ea2a89a102c75e43f Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 22 Oct 2024 14:55:22 +0200
Subject: [PATCH 15/35] cleaned formValidation.html

---
 .../molecules/simpleForm/default-/formValidation.html  | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index 29a989f99..c16704ab8 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -30,11 +30,6 @@
      }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" />
     </div>
     <div>
-      <!-- <label for="Birtday">Birthday => required + date validation</label>
-      <br>
-      <m-date-time-picker validation-form-usage="true" name="birthday-datepicker" picker-type="birth"
-        picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
-      </m-date-time-picker> -->
       <label for="birth">Birthday</label>
       <input id="birth" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
       "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
@@ -44,11 +39,6 @@
      }' type="text" value="" name="birth" placeholder="DD.MM.YYYY" autocomplete="off" />
     </div>
     <div>
-      <!-- <label for="Birtday">Birthday => required + date validation</label>
-      <br>
-      <m-date-time-picker validation-form-usage="true" name="birthday-datepicker" picker-type="birth"
-        picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
-      </m-date-time-picker> -->
       <label for="birth2">Birthday 2</label>
       <input id="birth2" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
       "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},

From 4618b87abab05a06b6c1d9b9f24662506fa7da30 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 22 Oct 2024 14:56:39 +0200
Subject: [PATCH 16/35] expanded Validation with date validation and formatter

---
 src/es/components/prototypes/Validation.js | 142 ++++++++++++++++++++-
 1 file changed, 140 insertions(+), 2 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index b52dd8f06..9d1031e82 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -40,6 +40,40 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       }
     }
 
+    this.validationDatePatternInputEventListener = (event) => {
+      const currentElemIndex = event.currentTarget.getAttribute('node-index')
+      this[`currentInput${currentElemIndex}`] = event.data
+      this[`currentValue${currentElemIndex}`] = event.currentTarget.value
+      this[`currentSelectionStart${currentElemIndex}`] = event.currentTarget.selectionStart
+      this[`currentValueLength${currentElemIndex}`] = this[`currentValue${currentElemIndex}`].length
+
+      if (this[`currentInput${currentElemIndex}`] !== null) this.checkNextChar(currentElemIndex)
+      if (this[`currentInput${currentElemIndex}`] !== null && this[`currentInput${currentElemIndex}`] !== this[`pickerFormatChar${currentElemIndex}`] && this[`pickerFormat${currentElemIndex}`].split('')[this[`currentValue${currentElemIndex}`].length - 1] === this[`pickerFormatChar${currentElemIndex}`]) {
+        this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`].slice(0, -1) + this[`pickerFormatChar${currentElemIndex}`] + this[`currentValue${currentElemIndex}`].slice(-1)
+      }
+
+      // if remove
+      if (this[`currentInput${currentElemIndex}`] === null) {
+        if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`]] === this[`pickerFormatChar${currentElemIndex}`] && this[`currentValue${currentElemIndex}`].length === this[`currentSelectionStart${currentElemIndex}`]) {
+          this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`]
+        }
+        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`]] === this[`pickerFormatChar${currentElemIndex}`] && this[`currentValue${currentElemIndex}`].length > this[`currentSelectionStart${currentElemIndex}`]) {
+          this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`].slice(0, this[`currentSelectionStart${currentElemIndex}`]) + this[`pickerFormatChar${currentElemIndex}`] + this[`currentValue${currentElemIndex}`].slice(this[`currentSelectionStart${currentElemIndex}`])
+          this.getInputFieldByNodeIndex(currentElemIndex).setSelectionRange(this[`currentSelectionStart${currentElemIndex}`], this[`currentSelectionStart${currentElemIndex}`])
+        }
+      } else if (this[`currentInput${currentElemIndex}`] === this[`pickerFormatChar${currentElemIndex}`]) {
+        if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'd') {
+          this.formatInput('d')
+        }
+        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'm') {
+          this.formatInput('m')
+        }
+        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'y') {
+          this.formatInput('y')
+        }
+      }
+    }
+
     this.applyMask = (value, maskPattern, isBackspace, cursorPosition) => {
       let result = ''
       let valueIndex = 0
@@ -170,7 +204,8 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
               this.validationValues[node.getAttribute('name')] = this.validationValues[node.getAttribute('name')] ? Object.assign(this.validationValues[node.getAttribute('name')], { isTouched: false }) : {}
               this.validationValues[node.getAttribute('name')][key] = Object.assign(parsedRules[key], { isValid: false })
               if (this.validationValues[node.getAttribute('name')].pattern && Object.prototype.hasOwnProperty.call(this.validationValues[node.getAttribute('name')].pattern, 'mask-value')) {
-                node.addEventListener('input', this.validationPatternInputEventListener)
+                if (node.hasAttribute('only-number-date-input')) node.addEventListener('input', this.validationDatePatternInputEventListener)
+                else node.addEventListener('input', this.validationPatternInputEventListener)
               }
             })
           }
@@ -178,6 +213,20 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         if (node.hasAttribute('only-number-date-input') && !node.hasAttribute('node-index')) {
           node.setAttribute('node-index', index)
           this[`pickerFormat${index}`] = this.validationValues[node.getAttribute('name')].pattern['mask-value'] ?? 'dd/mm/yyyy'
+
+          if (this[`pickerFormat${index}`].includes('/')) this[`pickerFormatChar${index}`] = '/'
+          else if (this[`pickerFormat${index}`].includes('.')) this[`pickerFormatChar${index}`] = '.'
+          else if (this[`pickerFormat${index}`].includes('-')) this[`pickerFormatChar${index}`] = '-'
+
+          this[`formIndexes${index}`] = {
+            formatChar: Array(),
+            d: Array(),
+            m: Array(),
+            y: Array()
+          }
+          this.setFormIndexes(index)
+
+          node.setAttribute('maxlength', `${this[`pickerFormat${index}`].length}`)
           node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
         }
       })
@@ -307,7 +356,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           const isPatternValueValidationValid = re.test(currentInput.value)
           this.setValidity(inputFieldName, validationName, isPatternValueValidationValid)
         }
-        if (validationRules.pattern['mask-value']) {
+        if (validationRules.pattern['mask-value'] && !validationRules.d) {
           const maskValue = validationRules.pattern['mask-value']
           let currentInputValue = currentInput.value
 
@@ -316,6 +365,11 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           const isPatternMaskValueValidationValid = this.validationPatternEnd(inputFieldName, validationName, currentInputValue)
           this.setValidity(inputFieldName, validationName, isPatternMaskValueValidationValid)
         }
+        if (validationRules.pattern['mask-value'] && validationRules.d) {
+          const currentFieldIndex = currentInput.getAttribute('node-index')
+          const mainDateFormatValid = this.customMainDateFormatValidator(currentFieldIndex)
+          this.setValidity(inputFieldName, validationName, mainDateFormatValid)
+        }
         if (!currentInput.value && !validationRules.required) {
           this.setValidity(inputFieldName, validationName, true)
         }
@@ -328,6 +382,21 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         const isMaxDateValidationValid = !!(new Date(currentInput.value) < new Date(validationRules['max-date-value'].value))
         this.setValidity(inputFieldName, validationName, isMaxDateValidationValid)
       }
+      if (validationName === 'd') {
+        const currentFieldIndex = currentInput.getAttribute('node-index')
+        const isDayValidationValid = this.customDateValidator('d', +validationRules['d'].min, +validationRules['d'].max, currentFieldIndex)
+        this.setValidity(inputFieldName, validationName, isDayValidationValid)
+      }
+      if (validationName === 'm') {
+        const currentFieldIndex = currentInput.getAttribute('node-index')
+        const isMonthValidationValid = this.customDateValidator('m', +validationRules['m'].min, +validationRules['m'].max, currentFieldIndex)
+        this.setValidity(inputFieldName, validationName, isMonthValidationValid)
+      }
+      if (validationName === 'y') {
+        const currentFieldIndex = currentInput.getAttribute('node-index')
+        const isYearValidationValid = this.customDateValidator('y', +validationRules['y'].min, +validationRules['y'].max, currentFieldIndex)
+        this.setValidity(inputFieldName, validationName, isYearValidationValid)
+      }
     })
   }
 
@@ -511,4 +580,73 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       return false
     }
   }
+
+  setFormIndexes(index) {
+    this[`pickerFormat${index}`].split('').forEach((char, index2) => {
+      if (char === 'd') this[`formIndexes${index}`].d.push(index2)
+      else if (char === 'm') this[`formIndexes${index}`].m.push(index2)
+      else if (char === 'y') this[`formIndexes${index}`].y.push(index2)
+      else if (char === this[`pickerFormatChar${index}`]) this[`formIndexes${index}`].formatChar.push(index2)
+    })
+  }
+
+  checkNextChar(index, formatCharTyped) {
+    if (this[`pickerFormat${index}`][this[`currentValueLength${index}`]] && this[`pickerFormat${index}`][this[`currentValueLength${index}`]] === this[`pickerFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+    }
+    if (formatCharTyped && this[`pickerFormat${index}`][this[`currentValueLength${index}`] + 1] === this[`pickerFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+    }
+  }
+
+  getInputFieldByNodeIndex(nodeIndex) {
+    if (this.root.querySelector(`input[node-index="${nodeIndex}"]`)) return this.root.querySelector(`input[node-index="${nodeIndex}"]`)
+  }
+
+  formatInput(index, dateType) {
+    this[`currentValue${index}`].split('').forEach((char, index2) => {
+      if (this[`formIndexes${index}`][dateType].includes(index2)) {
+        if (char === this[`pickerFormatChar${index}`]) {
+          let currentDateTypeValue = Array()
+          this[`formIndexes${index}`][dateType].forEach(ind => {
+            if (this[`currentValue${index}`][ind] === this[`pickerFormatChar${index}`] || !this[`currentValue${index}`][ind]) {
+              currentDateTypeValue.unshift('0')
+            } else {
+              currentDateTypeValue.unshift(this[`currentValue${index}`][ind])
+            }
+          })
+          let inputFieldValue = this[`currentValue${index}`].split('')
+          this[`formIndexes${index}`][dateType].forEach((ind, i) => {
+            inputFieldValue[ind] = currentDateTypeValue[i]
+          })
+          this.getInputFieldByNodeIndex(index).value = inputFieldValue.join('')
+          this.checkNextChar(true)
+        }
+      }
+    })
+  }
+
+  customDateValidator(type, min, max, index) {
+    let currentValueString = ''
+    let currentValueNumber = 0
+
+    this[`formIndexes${index}`][type].forEach(ind => {
+      if (this.getInputFieldByNodeIndex(index).value[ind]) currentValueString = currentValueString + this.getInputFieldByNodeIndex(index).value[ind]
+    })
+
+    currentValueNumber = +currentValueString || 0
+
+    if (min <= currentValueNumber && currentValueNumber <= max) return true
+    else return false
+  }
+
+  customMainDateFormatValidator(index) {
+    let mainValidation = true
+    console.log("hey", this[`formIndexes${index}`])
+    this[`formIndexes${index}`].formatChar.forEach(ind => {
+      if (this.getInputFieldByNodeIndex(index).value[ind] !== this[`pickerFormatChar${index}`]) mainValidation = false
+    })
+    if (this.getInputFieldByNodeIndex(index).value.length !== this[`pickerFormat${index}`].length) mainValidation = false
+    return mainValidation
+  }
 }

From 447ffabd3bea57e14dad611e2a5d503486bf42e2 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 23 Oct 2024 13:44:57 +0200
Subject: [PATCH 17/35] WIP fixed pattern logic

---
 src/es/components/prototypes/Validation.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 9d1031e82..490a6270a 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,6 +19,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
+      // here to implement
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
       if (this.realTimeSubmitButton) {
         this.checkIfFormValid()
@@ -63,13 +64,13 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         }
       } else if (this[`currentInput${currentElemIndex}`] === this[`pickerFormatChar${currentElemIndex}`]) {
         if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'd') {
-          this.formatInput('d')
+          this.formatInput(currentElemIndex, 'd')
         }
         else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'm') {
-          this.formatInput('m')
+          this.formatInput(currentElemIndex, 'm')
         }
         else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'y') {
-          this.formatInput('y')
+          this.formatInput(currentElemIndex, 'y')
         }
       }
     }
@@ -227,7 +228,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           this.setFormIndexes(index)
 
           node.setAttribute('maxlength', `${this[`pickerFormat${index}`].length}`)
-          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
+          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys(index))
         }
       })
     }
@@ -293,7 +294,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             })
           }
         }
-        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
+        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys())
       })
     }
     if (this.submitButton) {
@@ -568,9 +569,9 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     return el
   }
 
-  setOnlyNumbersInputAllowedKeys = (event) => {
+  setOnlyNumbersInputAllowedKeys = (event, index) => {
     const keyCode = event.which
-    if (event.key == this.pickerFormatChar) { }
+    if (event.key == this[`pickerFormatChar${index}`]) { }
     else if (keyCode == 32) {
       event.preventDefault()
       return false
@@ -620,7 +621,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             inputFieldValue[ind] = currentDateTypeValue[i]
           })
           this.getInputFieldByNodeIndex(index).value = inputFieldValue.join('')
-          this.checkNextChar(true)
+          this.checkNextChar(index, true)
         }
       }
     })
@@ -642,7 +643,6 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
   customMainDateFormatValidator(index) {
     let mainValidation = true
-    console.log("hey", this[`formIndexes${index}`])
     this[`formIndexes${index}`].formatChar.forEach(ind => {
       if (this.getInputFieldByNodeIndex(index).value[ind] !== this[`pickerFormatChar${index}`]) mainValidation = false
     })

From bfc88829c63425dfa735aeb755842b440afd3965 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 24 Oct 2024 08:32:03 +0200
Subject: [PATCH 18/35] Added zero autocorrect to date input field

---
 .../dateTimePicker/DateTimePicker.js          | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 933158bc8..f7c766cfc 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -103,6 +103,10 @@ export default class DateTimePicker extends Shadow() {
 
     this.customValidation = (event) => {
       if (this.customValidationObj.inTouched) {
+        this.addZeroIfNeeded('d')
+        this.addZeroIfNeeded('m')
+        this.addZeroIfNeeded('y')
+
         let mainValid = this.customMainValidator()
         let dayValid = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
         let monthValid = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
@@ -317,6 +321,21 @@ export default class DateTimePicker extends Shadow() {
     else return false
   }
 
+  addZeroIfNeeded(dateType) {
+    let currentDateUnit = this.inputField.value.slice(this.formIndexes[dateType][0], this.formIndexes[dateType][this.formIndexes[dateType].length - 1] + 1)
+    let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this.pickerFormatChar)
+
+    if (newCurrentDateUnit.length !== this.formIndexes[dateType].length) {
+      let lengthDiff = this.formIndexes[dateType].length - newCurrentDateUnit.length
+      for (let i = 0; i < lengthDiff; i++) {
+        if (dateType === 'y') newCurrentDateUnit.push('0')
+        else newCurrentDateUnit.unshift('0')
+
+      }
+      this.inputField.value = this.inputField.value.slice(0, this.formIndexes[dateType][0]) + newCurrentDateUnit.join('') + this.inputField.value.slice(this.formIndexes[dateType][this.formIndexes[dateType].length - 1])
+    }
+  }
+
   get inputField() {
     return this.root.querySelector('input')
   }

From b27f037ce2bf411928a6a44a4bc5dcfc4a75ff01 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 24 Oct 2024 08:32:57 +0200
Subject: [PATCH 19/35] Added zero autocorrect to component

---
 src/es/components/prototypes/Validation.js | 24 +++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 490a6270a..955089195 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,7 +19,14 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
-      // here to implement
+
+      if (this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
+        const currentNodeIndex = inputField.getAttribute('node-index')
+        this.addZeroIfNeeded('d', currentNodeIndex)
+        this.addZeroIfNeeded('m', currentNodeIndex)
+        this.addZeroIfNeeded('y', currentNodeIndex)
+      }
+
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
       if (this.realTimeSubmitButton) {
         this.checkIfFormValid()
@@ -649,4 +656,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     if (this.getInputFieldByNodeIndex(index).value.length !== this[`pickerFormat${index}`].length) mainValidation = false
     return mainValidation
   }
+
+  addZeroIfNeeded(dateType, index) {
+    let currentDateUnit = this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][0], this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1] + 1)
+    let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this[`pickerFormatChar${index}`])
+
+    if (newCurrentDateUnit.length !== this[`formIndexes${index}`][dateType].length) {
+      let lengthDiff = this[`formIndexes${index}`][dateType].length - newCurrentDateUnit.length
+      for (let i = 0; i < lengthDiff; i++) {
+        if (dateType === 'y') newCurrentDateUnit.push('0')
+        else newCurrentDateUnit.unshift('0')
+
+      }
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`formIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1])
+    }
+  }
 }

From 07cb552182b35129f9aa766114efbfba75421d0b Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 24 Oct 2024 10:52:12 +0200
Subject: [PATCH 20/35] Improved Date format logic

---
 .../molecules/dateTimePicker/DateTimePicker.js         | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index f7c766cfc..710d3879e 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -103,9 +103,9 @@ export default class DateTimePicker extends Shadow() {
 
     this.customValidation = (event) => {
       if (this.customValidationObj.inTouched) {
-        this.addZeroIfNeeded('d')
-        this.addZeroIfNeeded('m')
-        this.addZeroIfNeeded('y')
+        if (this.inputField.value.length > this.formIndexes['d'][0]) this.addZeroIfNeeded('d')
+        if (this.inputField.value.length > this.formIndexes['m'][0]) this.addZeroIfNeeded('m')
+        if (this.inputField.value.length > this.formIndexes['y'][0]) this.addZeroIfNeeded('y')
 
         let mainValid = this.customMainValidator()
         let dayValid = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
@@ -330,9 +330,11 @@ export default class DateTimePicker extends Shadow() {
       for (let i = 0; i < lengthDiff; i++) {
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
-
       }
       this.inputField.value = this.inputField.value.slice(0, this.formIndexes[dateType][0]) + newCurrentDateUnit.join('') + this.inputField.value.slice(this.formIndexes[dateType][this.formIndexes[dateType].length - 1])
+      if (this.pickerFormat[this.inputField.value.length] === this.pickerFormatChar) {
+        this.inputField.value = this.inputField.value + this.pickerFormatChar
+      }
     }
   }
 

From a2be0062c95d9dcb1107f4d7f5e83f573e78200c Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 24 Oct 2024 10:52:37 +0200
Subject: [PATCH 21/35] Improved validation Date format logic

---
 .../simpleForm/default-/formValidation.html        |  2 +-
 src/es/components/prototypes/Validation.js         | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index c16704ab8..93e9e4adb 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -40,7 +40,7 @@
     </div>
     <div>
       <label for="birth2">Birthday 2</label>
-      <input id="birth2" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      <input id="birth2" live-input-validation="true" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
       "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
       "m": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
       "y": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 955089195..36ee41112 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,12 +19,13 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
+      const nodeHasLiveValidation = inputField.getAttribute('live-input-validation') === 'true'
 
-      if (this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
+      if (!nodeHasLiveValidation && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
         const currentNodeIndex = inputField.getAttribute('node-index')
-        this.addZeroIfNeeded('d', currentNodeIndex)
-        this.addZeroIfNeeded('m', currentNodeIndex)
-        this.addZeroIfNeeded('y', currentNodeIndex)
+        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['d'][0]) this.addZeroIfNeeded('d', currentNodeIndex)
+        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['m'][0]) this.addZeroIfNeeded('m', currentNodeIndex)
+        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['y'][0]) this.addZeroIfNeeded('y', currentNodeIndex)
       }
 
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
@@ -666,9 +667,12 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       for (let i = 0; i < lengthDiff; i++) {
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
-
       }
       this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`formIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1])
+
+      if (this[`pickerFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`pickerFormatChar${index}`]) {
+        this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+      }
     }
   }
 }

From 73900451c4d025f2f5eaedac25d6688a68fe5fd0 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Thu, 24 Oct 2024 15:07:41 +0200
Subject: [PATCH 22/35] fixed event listener

---
 src/es/components/prototypes/Validation.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 36ee41112..f047b87b7 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -236,7 +236,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           this.setFormIndexes(index)
 
           node.setAttribute('maxlength', `${this[`pickerFormat${index}`].length}`)
-          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys(index))
+          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
         }
       })
     }
@@ -302,7 +302,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             })
           }
         }
-        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys())
+        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
       })
     }
     if (this.submitButton) {
@@ -577,9 +577,10 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     return el
   }
 
-  setOnlyNumbersInputAllowedKeys = (event, index) => {
+  setOnlyNumbersInputAllowedKeys = (event) => {
+    const currentNodeIndex = event.currentTarget.getAttribute('node-index')
     const keyCode = event.which
-    if (event.key == this[`pickerFormatChar${index}`]) { }
+    if (event.key == this[`pickerFormatChar${currentNodeIndex}`]) { }
     else if (keyCode == 32) {
       event.preventDefault()
       return false

From ece36680d254a2ebc759e993aef0267434af53f1 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 25 Oct 2024 11:43:10 +0200
Subject: [PATCH 23/35] Fixed addZero pattern logic

---
 .../molecules/dateTimePicker/DateTimePicker.js | 18 +++++++++++++++---
 src/es/components/prototypes/Validation.js     |  9 +++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 710d3879e..187d04b69 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -61,6 +61,7 @@ export default class DateTimePicker extends Shadow() {
 
       if (this.currentInput !== null) this.checkNextChar()
       if (this.currentInput !== null && this.currentInput !== this.pickerFormatChar && this.pickerFormat.split('')[this.currentValue.length - 1] === this.pickerFormatChar) {
+
         this.inputField.value = this.currentValue.slice(0, -1) + this.pickerFormatChar + this.currentValue.slice(-1)
       }
 
@@ -68,10 +69,9 @@ export default class DateTimePicker extends Shadow() {
       if (this.currentInput === null) {
         if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length === this.currentSelectionStart) {
           this.inputField.value = this.currentValue
-          // this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
-          // this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
         }
         else if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length > this.currentSelectionStart) {
+
           this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
           this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
         }
@@ -324,18 +324,30 @@ export default class DateTimePicker extends Shadow() {
   addZeroIfNeeded(dateType) {
     let currentDateUnit = this.inputField.value.slice(this.formIndexes[dateType][0], this.formIndexes[dateType][this.formIndexes[dateType].length - 1] + 1)
     let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this.pickerFormatChar)
-
     if (newCurrentDateUnit.length !== this.formIndexes[dateType].length) {
       let lengthDiff = this.formIndexes[dateType].length - newCurrentDateUnit.length
       for (let i = 0; i < lengthDiff; i++) {
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
       }
+
+      let isAllZero = true
+      newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
+
+      if (isAllZero) {
+        newCurrentDateUnit = ['0', '1']
+      }
+
       this.inputField.value = this.inputField.value.slice(0, this.formIndexes[dateType][0]) + newCurrentDateUnit.join('') + this.inputField.value.slice(this.formIndexes[dateType][this.formIndexes[dateType].length - 1])
+
       if (this.pickerFormat[this.inputField.value.length] === this.pickerFormatChar) {
         this.inputField.value = this.inputField.value + this.pickerFormatChar
       }
     }
+
+    if (this.pickerFormat[this.inputField.value.length] === this.pickerFormatChar && this.inputField.value[this.inputField.value.length - 1] !== this.pickerFormatChar) {
+      this.inputField.value = this.inputField.value + this.pickerFormatChar
+    }
   }
 
   get inputField() {
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index f047b87b7..f7e6b94e9 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -669,11 +669,20 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
       }
+
+      let isAllZero = true
+      newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
+
+      if (isAllZero) newCurrentDateUnit = ['0', '1']
+
       this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`formIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1])
 
       if (this[`pickerFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`pickerFormatChar${index}`]) {
         this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
       }
     }
+    if (this[`pickerFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`pickerFormatChar${index}`] && this.getInputFieldByNodeIndex(index).value[this.getInputFieldByNodeIndex(index).value.length - 1] !== this[`pickerFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+    }
   }
 }

From bc430fcc50d68d2a82c5b5439a530a8e6183d304 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 25 Oct 2024 15:57:21 +0200
Subject: [PATCH 24/35] Improved addZero pattern logic and event listeners

---
 .../dateTimePicker/DateTimePicker.js          | 21 +++++++++++++----
 src/es/components/prototypes/Validation.js    | 23 +++++++++++++++----
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 187d04b69..1c0cee7ce 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -71,7 +71,6 @@ export default class DateTimePicker extends Shadow() {
           this.inputField.value = this.currentValue
         }
         else if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length > this.currentSelectionStart) {
-
           this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
           this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
         }
@@ -325,17 +324,29 @@ export default class DateTimePicker extends Shadow() {
     let currentDateUnit = this.inputField.value.slice(this.formIndexes[dateType][0], this.formIndexes[dateType][this.formIndexes[dateType].length - 1] + 1)
     let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this.pickerFormatChar)
     if (newCurrentDateUnit.length !== this.formIndexes[dateType].length) {
+
+      let currentFormatCharIndexes = []
+      this.inputField.value.split('').forEach((char, index) => {
+        char === this.pickerFormatChar ? currentFormatCharIndexes.push(index) : ''
+      })
+
       let lengthDiff = this.formIndexes[dateType].length - newCurrentDateUnit.length
       for (let i = 0; i < lengthDiff; i++) {
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
       }
 
-      let isAllZero = true
-      newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
+      let formatCharsNextToEachOther = currentFormatCharIndexes.find((el, index) => el + 1 === currentFormatCharIndexes[index + 1])
 
-      if (isAllZero) {
-        newCurrentDateUnit = ['0', '1']
+      if (formatCharsNextToEachOther || this.inputField.value[0] === this.pickerFormatChar) {
+        newCurrentDateUnit = ['0', '1', this.pickerFormatChar]
+      } else {
+        let isAllZero = true
+        newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
+
+        if (isAllZero) {
+          newCurrentDateUnit = ['0', '1']
+        }
       }
 
       this.inputField.value = this.inputField.value.slice(0, this.formIndexes[dateType][0]) + newCurrentDateUnit.join('') + this.inputField.value.slice(this.formIndexes[dateType][this.formIndexes[dateType].length - 1])
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index f7e6b94e9..dddb85d01 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,9 +19,8 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
-      const nodeHasLiveValidation = inputField.getAttribute('live-input-validation') === 'true'
 
-      if (!nodeHasLiveValidation && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
+      if (event.type === 'change' && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
         const currentNodeIndex = inputField.getAttribute('node-index')
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['d'][0]) this.addZeroIfNeeded('d', currentNodeIndex)
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['m'][0]) this.addZeroIfNeeded('m', currentNodeIndex)
@@ -201,6 +200,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
         if (nodeHasLiveValidation) {
           node.addEventListener('input', this.validationChangeEventListener)
+          if (node.hasAttribute('only-number-date-input')) node.addEventListener('change', this.validationChangeEventListener)
         } else {
           node.addEventListener('change', this.validationChangeEventListener)
         }
@@ -664,16 +664,29 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this[`pickerFormatChar${index}`])
 
     if (newCurrentDateUnit.length !== this[`formIndexes${index}`][dateType].length) {
+      let currentFormatCharIndexes = []
+      this.getInputFieldByNodeIndex(index).value.split('').forEach((char, index2) => {
+        char === this[`pickerFormatChar${index}`] ? currentFormatCharIndexes.push(index2) : ''
+      })
+
       let lengthDiff = this[`formIndexes${index}`][dateType].length - newCurrentDateUnit.length
       for (let i = 0; i < lengthDiff; i++) {
         if (dateType === 'y') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
       }
 
-      let isAllZero = true
-      newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
+      let formatCharsNextToEachOther = currentFormatCharIndexes.find((el, index) => el + 1 === currentFormatCharIndexes[index + 1])
+
+      if (formatCharsNextToEachOther || this.getInputFieldByNodeIndex(index).value[0] === this[`pickerFormatChar${index}`]) {
+        newCurrentDateUnit = ['0', '1', this[`pickerFormatChar${index}`]]
+      } else {
+        let isAllZero = true
+        newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
 
-      if (isAllZero) newCurrentDateUnit = ['0', '1']
+        if (isAllZero) {
+          newCurrentDateUnit = ['0', '1']
+        }
+      }
 
       this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`formIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1])
 

From 4e14f8b09a05296647220e7ebaf8b98774946fdf Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 29 Oct 2024 10:00:33 +0100
Subject: [PATCH 25/35] removed live input validation on dates

---
 src/es/components/prototypes/Validation.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index dddb85d01..a61cadb20 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -200,7 +200,6 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
         if (nodeHasLiveValidation) {
           node.addEventListener('input', this.validationChangeEventListener)
-          if (node.hasAttribute('only-number-date-input')) node.addEventListener('change', this.validationChangeEventListener)
         } else {
           node.addEventListener('change', this.validationChangeEventListener)
         }
@@ -641,9 +640,14 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     let currentValueNumber = 0
 
     this[`formIndexes${index}`][type].forEach(ind => {
-      if (this.getInputFieldByNodeIndex(index).value[ind]) currentValueString = currentValueString + this.getInputFieldByNodeIndex(index).value[ind]
+      if (this.getInputFieldByNodeIndex(index).value[ind]) {
+        currentValueString = currentValueString + this.getInputFieldByNodeIndex(index).value[ind]
+        let currentValueStringArray = currentValueString.split('').filter(char => char !== this[`pickerFormatChar${index}`])
+        currentValueString = currentValueStringArray.join('')
+      }
     })
 
+
     currentValueNumber = +currentValueString || 0
 
     if (min <= currentValueNumber && currentValueNumber <= max) return true

From 9e73336be6677cc760074627ff69162acfe5fb21 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 30 Oct 2024 09:36:08 +0100
Subject: [PATCH 26/35] Improved char remove logic on Validation.js

---
 .../molecules/dateTimePicker/DateTimePicker.js           | 8 +++++++-
 src/es/components/prototypes/Validation.js               | 9 +++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
index 1c0cee7ce..917f62ee0 100644
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
@@ -58,15 +58,16 @@ export default class DateTimePicker extends Shadow() {
       this.currentValue = this.inputField.value
       this.currentSelectionStart = this.inputField.selectionStart
       this.currentValueLength = this.currentValue.length
+      this.isRemovedByInput = false
 
       if (this.currentInput !== null) this.checkNextChar()
       if (this.currentInput !== null && this.currentInput !== this.pickerFormatChar && this.pickerFormat.split('')[this.currentValue.length - 1] === this.pickerFormatChar) {
-
         this.inputField.value = this.currentValue.slice(0, -1) + this.pickerFormatChar + this.currentValue.slice(-1)
       }
 
       // if remove
       if (this.currentInput === null) {
+        this.isRemovedByInput = true
         if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length === this.currentSelectionStart) {
           this.inputField.value = this.currentValue
         }
@@ -106,6 +107,10 @@ export default class DateTimePicker extends Shadow() {
         if (this.inputField.value.length > this.formIndexes['m'][0]) this.addZeroIfNeeded('m')
         if (this.inputField.value.length > this.formIndexes['y'][0]) this.addZeroIfNeeded('y')
 
+        let currentSpecCharLength = this.inputField?.value.split('').filter(char => char === this.pickerFormatChar).length
+        let oldSpecCharLength = this.oldInputValue?.split('').filter(char => char === this.pickerFormatChar).length
+        if (this.isRemovedByInput && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.inputField.value = ''
+
         let mainValid = this.customMainValidator()
         let dayValid = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
         let monthValid = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
@@ -141,6 +146,7 @@ export default class DateTimePicker extends Shadow() {
           errorMessageWrapper.removeChild(errorMessageText)
         }
         this.root.appendChild(errorMessageWrapper)
+        this.oldInputValue = this.inputField.value
       }
     }
   }
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index a61cadb20..b0c5b54ba 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,12 +19,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
+      const inputFieldIndex = inputField.getAttribute('node-index')
 
       if (event.type === 'change' && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
         const currentNodeIndex = inputField.getAttribute('node-index')
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['d'][0]) this.addZeroIfNeeded('d', currentNodeIndex)
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['m'][0]) this.addZeroIfNeeded('m', currentNodeIndex)
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['y'][0]) this.addZeroIfNeeded('y', currentNodeIndex)
+
+        let currentSpecCharLength = this.getInputFieldByNodeIndex(inputFieldIndex)?.value.split('').filter(char => char === this[`pickerFormatChar${inputFieldIndex}`]).length
+        let oldSpecCharLength = this[`oldInputValue${inputFieldIndex}`]?.split('').filter(char => char === this[`pickerFormatChar${inputFieldIndex}`]).length
+        if (this[`isRemovedByInput${inputFieldIndex}`] && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.getInputFieldByNodeIndex(inputFieldIndex).value = ''
+
+        this[`oldInputValue${inputFieldIndex}`] = this.getInputFieldByNodeIndex(inputFieldIndex).value
       }
 
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
@@ -54,6 +61,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       this[`currentValue${currentElemIndex}`] = event.currentTarget.value
       this[`currentSelectionStart${currentElemIndex}`] = event.currentTarget.selectionStart
       this[`currentValueLength${currentElemIndex}`] = this[`currentValue${currentElemIndex}`].length
+      this[`isRemovedByInput${currentElemIndex}`] = false
 
       if (this[`currentInput${currentElemIndex}`] !== null) this.checkNextChar(currentElemIndex)
       if (this[`currentInput${currentElemIndex}`] !== null && this[`currentInput${currentElemIndex}`] !== this[`pickerFormatChar${currentElemIndex}`] && this[`pickerFormat${currentElemIndex}`].split('')[this[`currentValue${currentElemIndex}`].length - 1] === this[`pickerFormatChar${currentElemIndex}`]) {
@@ -62,6 +70,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
       // if remove
       if (this[`currentInput${currentElemIndex}`] === null) {
+        this[`isRemovedByInput${currentElemIndex}`] = true
         if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`]] === this[`pickerFormatChar${currentElemIndex}`] && this[`currentValue${currentElemIndex}`].length === this[`currentSelectionStart${currentElemIndex}`]) {
           this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`]
         }

From 2396fa5814a8ca9440b5c663744fde2407e3e53d Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 30 Oct 2024 09:48:22 +0100
Subject: [PATCH 27/35] Improved char remove logic on Validation.js refactored

---
 src/es/components/prototypes/Validation.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index b0c5b54ba..a57c9a821 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -19,7 +19,6 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     this.validationChangeEventListener = (event) => {
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
-      const inputFieldIndex = inputField.getAttribute('node-index')
 
       if (event.type === 'change' && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
         const currentNodeIndex = inputField.getAttribute('node-index')
@@ -27,11 +26,11 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['m'][0]) this.addZeroIfNeeded('m', currentNodeIndex)
         if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['y'][0]) this.addZeroIfNeeded('y', currentNodeIndex)
 
-        let currentSpecCharLength = this.getInputFieldByNodeIndex(inputFieldIndex)?.value.split('').filter(char => char === this[`pickerFormatChar${inputFieldIndex}`]).length
-        let oldSpecCharLength = this[`oldInputValue${inputFieldIndex}`]?.split('').filter(char => char === this[`pickerFormatChar${inputFieldIndex}`]).length
-        if (this[`isRemovedByInput${inputFieldIndex}`] && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.getInputFieldByNodeIndex(inputFieldIndex).value = ''
+        let currentSpecCharLength = this.getInputFieldByNodeIndex(currentNodeIndex)?.value.split('').filter(char => char === this[`pickerFormatChar${currentNodeIndex}`]).length
+        let oldSpecCharLength = this[`oldInputValue${currentNodeIndex}`]?.split('').filter(char => char === this[`pickerFormatChar${currentNodeIndex}`]).length
+        if (this[`isRemovedByInput${currentNodeIndex}`] && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.getInputFieldByNodeIndex(currentNodeIndex).value = ''
 
-        this[`oldInputValue${inputFieldIndex}`] = this.getInputFieldByNodeIndex(inputFieldIndex).value
+        this[`oldInputValue${currentNodeIndex}`] = this.getInputFieldByNodeIndex(currentNodeIndex).value
       }
 
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)

From 1a6b30cd0cae8023828596ddad752419f3518221 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 30 Oct 2024 10:50:58 +0100
Subject: [PATCH 28/35] removed dateTimePicker comp.

---
 .../dateTimePicker/DateTimePicker.js          | 373 ------------------
 .../dateTimePicker/default-/default-.css      |   2 -
 .../dateTimePicker/default-/default-.html     |   2 -
 3 files changed, 377 deletions(-)
 delete mode 100644 src/es/components/molecules/dateTimePicker/DateTimePicker.js
 delete mode 100644 src/es/components/molecules/dateTimePicker/default-/default-.css
 delete mode 100644 src/es/components/molecules/dateTimePicker/default-/default-.html

diff --git a/src/es/components/molecules/dateTimePicker/DateTimePicker.js b/src/es/components/molecules/dateTimePicker/DateTimePicker.js
deleted file mode 100644
index 917f62ee0..000000000
--- a/src/es/components/molecules/dateTimePicker/DateTimePicker.js
+++ /dev/null
@@ -1,373 +0,0 @@
-// @ts-check
-// @ts-check
-import { Shadow } from '../../prototypes/Shadow.js'
-
-/**
- * Navigation hosts uls
- * Example at: /src/es/components/pages/Home.html
- * As a molecule, this component shall hold Atoms
- *
- * @export
- * @class DateTimePicker
- * @type {CustomElementConstructor}
- * @attribute {
- * }
- */
-
-export default class DateTimePicker extends Shadow() {
-  constructor(options = {}, ...args) {
-    super({ importMetaUrl: import.meta.url, ...options }, ...args)
-    // TODO create warning if picker-type doesn't exist
-    this.pickerType = this.getAttribute("picker-type")
-    // TODO create warning if picker-format doesn't exist
-    this.pickerFormat = this.getAttribute("picker-format").toLowerCase() ?? 'dd/mm/yyyy'
-    this.isValidationFormElem = this.getAttribute("validation-form-usage") === 'true'
-    if (this.isValidationFormElem) this.validationFormWrapper = this.getRootNode().host // console.log("hi", this.getRootNode().host.setValidity())
-    // implementing into validation js
-    this.pickerFormatChar = "/"
-    this.formIndexes = {
-      formatChar: Array(),
-      d: Array(),
-      m: Array(),
-      y: Array()
-    }
-    this.splittedFormat = this.getSplittedFormat(this.pickerFormat)
-    this.customValidationObj = this.getAttribute("custom-validation-obj") || {
-      d: {
-        max: 31,
-        min: 1,
-        errorMessage: 'Please add a valid day, between 1 and 31.'
-      },
-      m: {
-        max: 12,
-        min: 1,
-        errorMessage: 'Please add a valid month, between 1 and 12.'
-      },
-      y: {
-        max: 2010,
-        min: 1900,
-        errorMessage: 'Please add a valid year, between 1900 and 2010.'
-      },
-      errorMessage: 'Please add a valid format as dd/mm/yyyy'
-    }
-    this.setFormIndexes()
-
-    this.formAsPattern = (event) => {
-      this.customValidationObj.inTouched = true
-      this.currentInput = event.data
-      this.currentValue = this.inputField.value
-      this.currentSelectionStart = this.inputField.selectionStart
-      this.currentValueLength = this.currentValue.length
-      this.isRemovedByInput = false
-
-      if (this.currentInput !== null) this.checkNextChar()
-      if (this.currentInput !== null && this.currentInput !== this.pickerFormatChar && this.pickerFormat.split('')[this.currentValue.length - 1] === this.pickerFormatChar) {
-        this.inputField.value = this.currentValue.slice(0, -1) + this.pickerFormatChar + this.currentValue.slice(-1)
-      }
-
-      // if remove
-      if (this.currentInput === null) {
-        this.isRemovedByInput = true
-        if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length === this.currentSelectionStart) {
-          this.inputField.value = this.currentValue
-        }
-        else if (this.pickerFormat[this.currentSelectionStart] === this.pickerFormatChar && this.currentValue.length > this.currentSelectionStart) {
-          this.inputField.value = this.currentValue.slice(0, this.currentSelectionStart) + this.pickerFormatChar + this.currentValue.slice(this.currentSelectionStart)
-          this.inputField.setSelectionRange(this.currentSelectionStart, this.currentSelectionStart)
-        }
-      } else if (this.currentInput === this.pickerFormatChar) {
-        if (this.pickerFormat[this.currentSelectionStart - 1] === 'd') {
-          this.formatInput('d')
-        }
-        else if (this.pickerFormat[this.currentSelectionStart - 1] === 'm') {
-          this.formatInput('m')
-        }
-        else if (this.pickerFormat[this.currentSelectionStart - 1] === 'y') {
-          this.formatInput('y')
-        }
-      }
-    }
-
-    this.setNotAllowedKeys = (event) => {
-      const keyCode = event.which
-      if (event.key == this.pickerFormatChar) { }
-      else if (keyCode == 32) {
-        event.preventDefault()
-        return false
-      } else if (keyCode == 8 || keyCode == 37 || keyCode == 39 || keyCode == 46) {
-      } else if (keyCode < 48 || keyCode > 57) {
-        event.preventDefault()
-        return false
-      }
-    }
-
-    this.customValidation = (event) => {
-      if (this.customValidationObj.inTouched) {
-        if (this.inputField.value.length > this.formIndexes['d'][0]) this.addZeroIfNeeded('d')
-        if (this.inputField.value.length > this.formIndexes['m'][0]) this.addZeroIfNeeded('m')
-        if (this.inputField.value.length > this.formIndexes['y'][0]) this.addZeroIfNeeded('y')
-
-        let currentSpecCharLength = this.inputField?.value.split('').filter(char => char === this.pickerFormatChar).length
-        let oldSpecCharLength = this.oldInputValue?.split('').filter(char => char === this.pickerFormatChar).length
-        if (this.isRemovedByInput && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.inputField.value = ''
-
-        let mainValid = this.customMainValidator()
-        let dayValid = this.customDateValidator('d', +this.customValidationObj.d.min, +this.customValidationObj.d.max)
-        let monthValid = this.customDateValidator('m', +this.customValidationObj.m.min, +this.customValidationObj.m.max)
-        let yearValid = this.customDateValidator('y', +this.customValidationObj.y.min, +this.customValidationObj.y.max)
-
-        if (this.root.querySelector('div.error-message-wrapper')) {
-          this.classList.remove('error')
-          this.root.removeChild(this.root.querySelector('div.error-message-wrapper'))
-        }
-
-        let errorMessageWrapper = document.createElement('div')
-        errorMessageWrapper.classList.add('error-message-wrapper')
-        let errorMessageText = document.createElement('p')
-        errorMessageText.classList.add('error-message-text')
-        errorMessageWrapper.appendChild(errorMessageText)
-
-        if (!mainValid) {
-          this.classList.add('error')
-          errorMessageText.textContent = this.customValidationObj.errorMessage
-        } else if (!dayValid) {
-          this.classList.add('error')
-          errorMessageText.textContent = this.customValidationObj.d.errorMessage
-        } else if (!monthValid) {
-          this.classList.add('error')
-          errorMessageText.textContent = this.customValidationObj.m.errorMessage
-
-        } else if (!yearValid) {
-          this.classList.add('error')
-          errorMessageText.textContent = this.customValidationObj.y.errorMessage
-
-        } else {
-          this.classList.remove('error')
-          errorMessageWrapper.removeChild(errorMessageText)
-        }
-        this.root.appendChild(errorMessageWrapper)
-        this.oldInputValue = this.inputField.value
-      }
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-    if (this.shouldRenderCSS()) this.renderCSS()
-    if (this.shouldRenderHTML()) this.renderHTML()
-    if (this.inputField) {
-      this.inputField.addEventListener('keydown', this.setNotAllowedKeys)
-      this.inputField.addEventListener('input', this.formAsPattern)
-      this.inputField.addEventListener('change', this.customValidation)
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    if (this.inputField) {
-      this.inputField.removeEventListener('keydown', this.setNotAllowedKeys)
-      this.inputField.removeEventListener('input', this.formAsPattern)
-      this.inputField.removeEventListener('change', this.customValidation)
-    }
-  }
-
-  /**
-   * evaluates if a render is necessary
-   *
-   * @return {boolean}
-   */
-  shouldRenderCSS() {
-    return !this.root.querySelector(`${this.cssSelector} > style[_css]`)
-  }
-
-  /**
-   * evaluates if a render is necessary
-   *
-   * @return {boolean}
-   */
-  shouldRenderHTML() {
-    return !this.root.querySelector('input')
-  }
-
-  /**
-   * renders the m-multi-level-navigation css
-   *
-   * @return {Promise<void>|void}
-   */
-  renderCSS() {
-    this.css = /* css */`
-    :host { }
-    `
-    return this.fetchTemplate()
-  }
-
-  /**
-   * fetches the template
-   *
-   * @return {Promise<void>}
-   */
-  fetchTemplate() {
-    /** @type {import('../../prototypes/Shadow.js').fetchCSSParams[]} */
-    const styles = [
-      {
-        path: `${this.importMetaUrl}../../../../css/reset.css`, // no variables for this reason no namespace
-        namespace: false
-      },
-      {
-        path: `${this.importMetaUrl}../../../../css/style.css`, // apply namespace and fallback to allow overwriting on deeper level
-        namespaceFallback: true
-      }
-    ]
-    switch (this.getAttribute('namespace')) {
-      case 'date-time-picker-default-':
-        return this.fetchCSS([{
-          path: `${this.importMetaUrl}./default-/default-.css`, // apply namespace since it is specific and no fallback
-          namespace: false,
-          replaces: [{
-            pattern: '--date-time-picker-default-',
-            flags: 'g',
-            replacement: '--date-time-picker-default-'
-          }]
-        }, ...styles], false)
-      default:
-        return Promise.resolve()
-    }
-  }
-
-  /**
-   *
-   *
-   * @return {Promise<void>|void}
-   */
-  renderHTML() {
-    let inputField = document.createElement('input')
-    if (this.pickerFormat) {
-      inputField.setAttribute('maxlength', `${this.pickerFormat.length}`)
-      inputField.setAttribute('placeholder', `${this.getAttribute("placeholder")}`)
-
-    }
-    if (this.pickerType === 'birth') {
-      this.html = inputField
-    } else {
-
-    }
-    return
-  }
-
-  getSplittedFormat = (format) => {
-    if (format.includes('/')) return this.pickerFormatChar = '/', format.split('/')
-    if (format.includes('.')) return this.pickerFormatChar = '.', format.split('.')
-    if (format.includes('-')) return this.pickerFormatChar = '-', format.split('-')
-    return
-  }
-
-  checkNextChar(formatCharTyped) {
-    if (this.pickerFormat[this.currentValueLength] && this.pickerFormat[this.currentValueLength] === this.pickerFormatChar) {
-      this.inputField.value = this.inputField.value + this.pickerFormatChar
-    }
-    if (formatCharTyped && this.pickerFormat[this.currentValueLength + 1] === this.pickerFormatChar) {
-      this.inputField.value = this.inputField.value + this.pickerFormatChar
-    }
-  }
-
-  setFormIndexes() {
-    this.pickerFormat.split('').forEach((char, index) => {
-      if (char === 'd') this.formIndexes.d.push(index)
-      else if (char === 'm') this.formIndexes.m.push(index)
-      else if (char === 'y') this.formIndexes.y.push(index)
-      else if (char === this.pickerFormatChar) this.formIndexes.formatChar.push(index)
-
-    })
-  }
-
-  formatInput(dateType) {
-    this.currentValue.split('').forEach((char, index) => {
-      if (this.formIndexes[dateType].includes(index)) {
-        if (char === this.pickerFormatChar) {
-          let currentDateTypeValue = Array()
-          this.formIndexes[dateType].forEach(ind => {
-            if (this.currentValue[ind] === this.pickerFormatChar || !this.currentValue[ind]) {
-              currentDateTypeValue.unshift('0')
-            } else {
-              currentDateTypeValue.unshift(this.currentValue[ind])
-            }
-          })
-          let inputFieldValue = this.currentValue.split('')
-          this.formIndexes[dateType].forEach((ind, i) => {
-            inputFieldValue[ind] = currentDateTypeValue[i]
-          })
-          this.inputField.value = inputFieldValue.join('')
-          this.checkNextChar(true)
-        }
-      }
-    })
-  }
-
-  customMainValidator() {
-    let mainValidation = true
-    this.formIndexes.formatChar.forEach(ind => {
-      if (this.inputField.value[ind] !== this.pickerFormatChar) mainValidation = false
-    })
-    if (this.inputField.value.length !== this.pickerFormat.length) mainValidation = false
-    return mainValidation
-  }
-
-  customDateValidator(type, min, max) {
-    let currentValueString = ''
-    let currentValueNumber = 0
-
-    this.formIndexes[type].forEach(ind => {
-      if (this.inputField.value[ind]) currentValueString = currentValueString + this.inputField.value[ind]
-    })
-
-    currentValueNumber = +currentValueString || 0
-
-    if (min <= currentValueNumber && currentValueNumber <= max) return true
-    else return false
-  }
-
-  addZeroIfNeeded(dateType) {
-    let currentDateUnit = this.inputField.value.slice(this.formIndexes[dateType][0], this.formIndexes[dateType][this.formIndexes[dateType].length - 1] + 1)
-    let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this.pickerFormatChar)
-    if (newCurrentDateUnit.length !== this.formIndexes[dateType].length) {
-
-      let currentFormatCharIndexes = []
-      this.inputField.value.split('').forEach((char, index) => {
-        char === this.pickerFormatChar ? currentFormatCharIndexes.push(index) : ''
-      })
-
-      let lengthDiff = this.formIndexes[dateType].length - newCurrentDateUnit.length
-      for (let i = 0; i < lengthDiff; i++) {
-        if (dateType === 'y') newCurrentDateUnit.push('0')
-        else newCurrentDateUnit.unshift('0')
-      }
-
-      let formatCharsNextToEachOther = currentFormatCharIndexes.find((el, index) => el + 1 === currentFormatCharIndexes[index + 1])
-
-      if (formatCharsNextToEachOther || this.inputField.value[0] === this.pickerFormatChar) {
-        newCurrentDateUnit = ['0', '1', this.pickerFormatChar]
-      } else {
-        let isAllZero = true
-        newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
-
-        if (isAllZero) {
-          newCurrentDateUnit = ['0', '1']
-        }
-      }
-
-      this.inputField.value = this.inputField.value.slice(0, this.formIndexes[dateType][0]) + newCurrentDateUnit.join('') + this.inputField.value.slice(this.formIndexes[dateType][this.formIndexes[dateType].length - 1])
-
-      if (this.pickerFormat[this.inputField.value.length] === this.pickerFormatChar) {
-        this.inputField.value = this.inputField.value + this.pickerFormatChar
-      }
-    }
-
-    if (this.pickerFormat[this.inputField.value.length] === this.pickerFormatChar && this.inputField.value[this.inputField.value.length - 1] !== this.pickerFormatChar) {
-      this.inputField.value = this.inputField.value + this.pickerFormatChar
-    }
-  }
-
-  get inputField() {
-    return this.root.querySelector('input')
-  }
-}
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.css b/src/es/components/molecules/dateTimePicker/default-/default-.css
deleted file mode 100644
index dc9093b45..000000000
--- a/src/es/components/molecules/dateTimePicker/default-/default-.css
+++ /dev/null
@@ -1,2 +0,0 @@
-:host {
-}
diff --git a/src/es/components/molecules/dateTimePicker/default-/default-.html b/src/es/components/molecules/dateTimePicker/default-/default-.html
deleted file mode 100644
index 830b19698..000000000
--- a/src/es/components/molecules/dateTimePicker/default-/default-.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<m-date-time-picker picker-type="birth" picker-format="dd.mm.yyyy" placeholder="DD.MM.YYYY">
-</m-date-time-picker>
\ No newline at end of file

From c706c4f740c51c5d2a108adc1c6c82cca0f3f846 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 30 Oct 2024 10:51:41 +0100
Subject: [PATCH 29/35] removed from index.html

---
 index.html | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/index.html b/index.html
index 6ecbf9a26..1887e8cfa 100644
--- a/index.html
+++ b/index.html
@@ -447,15 +447,6 @@ <h3>DialogClipboard</h3>
       </ul>
     `
   </script>
-  <h3>DateTimePicker</h3>
-  <div id=dateTimePicker></div>
-  <script>
-    document.querySelector('#dateTimePicker').innerHTML = /* HTML */`
-       <ul>
-         <li><a href="./docs/Template.html?${headerFooterQuery}&content=./src/es/components/molecules/dateTimePicker/default-/default-.html">"default-" Page</a> / <a href=./src/es/components/molecules/dateTimePicker/default-/default-.html>"default-" Plain</a></li>
-       </ul>
-     `
-  </script>
   <h1>Organisms</h1>
   <h3>Wrapper</h3>
   <div id=wrapper></div>

From 5307d30cb03a1c4ca7a155390a35369771bfadb7 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Wed, 30 Oct 2024 14:03:10 +0100
Subject: [PATCH 30/35] renaming and html update

---
 .../simpleForm/default-/formValidation.html   |  27 ++-
 src/es/components/prototypes/Validation.js    | 209 +++++++++---------
 2 files changed, 124 insertions(+), 112 deletions(-)

diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index 93e9e4adb..5218606ac 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -30,23 +30,32 @@
      }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" />
     </div>
     <div>
-      <label for="birth">Birthday</label>
-      <input id="birth" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
-      "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
-      "m": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
-      "y": {"max": "2010", "min": "1900", "error-message": "Please add a valid year, between 1900 and 2010."},
+      <label for="birth">Birthday1</label>
+      <input id="birth" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      "day": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
+      "month": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
+      "year": {"max": "2010", "min": "1900", "error-message": "Please add a valid year, between 1900 and 2010."},
       "pattern": {"mask-value": "dd.mm.yyyy", "error-message": "Please add a valid format as dd.mm.yyyy"}
      }' type="text" value="" name="birth" placeholder="DD.MM.YYYY" autocomplete="off" />
     </div>
     <div>
       <label for="birth2">Birthday 2</label>
-      <input id="birth2" live-input-validation="true" only-number-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
-      "d": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
-      "m": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
-      "y": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},
+      <input id="birth2" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      "day": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
+      "month": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
+      "year": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},
       "pattern": {"mask-value": "dd/mm/yyyy", "error-message": "Please add a valid format as dd/mm/yyyy"}
      }' type="text" value="" name="birth2" placeholder="DD/MM/YYYY" autocomplete="off" />
     </div>
+    <div>
+      <label for="birth3">Birthday 3</label>
+      <input id="birth3" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      "day": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
+      "month": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
+      "year": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},
+      "pattern": {"mask-value": "dd-mm-yyyy", "error-message": "Please add a valid format as dd-mm-yyyy"}
+     }' type="text" value="" name="birth3" placeholder="DD-MM-YYYY" autocomplete="off" />
+    </div>
     <div>
       <label for="Firstname">Vorname => required + min-length:3 </label>
       <input id="Firstname" data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index a57c9a821..8a0d0664d 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -20,17 +20,17 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       const inputField = event.currentTarget
       const inputFieldName = inputField.getAttribute('name')
 
-      if (event.type === 'change' && this.validationValues[inputFieldName]['d'] && this.validationValues[inputFieldName]['m'] && this.validationValues[inputFieldName]['y'] && inputField.hasAttribute('node-index')) {
-        const currentNodeIndex = inputField.getAttribute('node-index')
-        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['d'][0]) this.addZeroIfNeeded('d', currentNodeIndex)
-        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['m'][0]) this.addZeroIfNeeded('m', currentNodeIndex)
-        if (inputField.value.length > this[`formIndexes${currentNodeIndex}`]['y'][0]) this.addZeroIfNeeded('y', currentNodeIndex)
+      if (event.type === 'change' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
+        const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][0]) this.dateInputAddZeroIfNeeded('day', currentDateInputNodeIndex)
+        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][0]) this.dateInputAddZeroIfNeeded('month', currentDateInputNodeIndex)
+        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['year'][0]) this.dateInputAddZeroIfNeeded('year', currentDateInputNodeIndex)
 
-        let currentSpecCharLength = this.getInputFieldByNodeIndex(currentNodeIndex)?.value.split('').filter(char => char === this[`pickerFormatChar${currentNodeIndex}`]).length
-        let oldSpecCharLength = this[`oldInputValue${currentNodeIndex}`]?.split('').filter(char => char === this[`pickerFormatChar${currentNodeIndex}`]).length
-        if (this[`isRemovedByInput${currentNodeIndex}`] && oldSpecCharLength > 0 && currentSpecCharLength !== oldSpecCharLength) this.getInputFieldByNodeIndex(currentNodeIndex).value = ''
+        let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(currentDateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
+        let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
+        if (this[`isDateInputValueRemoved${currentDateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = ''
 
-        this[`oldInputValue${currentNodeIndex}`] = this.getInputFieldByNodeIndex(currentNodeIndex).value
+        this[`oldDateInputValue${currentDateInputNodeIndex}`] = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value
       }
 
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
@@ -54,38 +54,38 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       }
     }
 
-    this.validationDatePatternInputEventListener = (event) => {
-      const currentElemIndex = event.currentTarget.getAttribute('node-index')
-      this[`currentInput${currentElemIndex}`] = event.data
-      this[`currentValue${currentElemIndex}`] = event.currentTarget.value
-      this[`currentSelectionStart${currentElemIndex}`] = event.currentTarget.selectionStart
-      this[`currentValueLength${currentElemIndex}`] = this[`currentValue${currentElemIndex}`].length
-      this[`isRemovedByInput${currentElemIndex}`] = false
-
-      if (this[`currentInput${currentElemIndex}`] !== null) this.checkNextChar(currentElemIndex)
-      if (this[`currentInput${currentElemIndex}`] !== null && this[`currentInput${currentElemIndex}`] !== this[`pickerFormatChar${currentElemIndex}`] && this[`pickerFormat${currentElemIndex}`].split('')[this[`currentValue${currentElemIndex}`].length - 1] === this[`pickerFormatChar${currentElemIndex}`]) {
-        this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`].slice(0, -1) + this[`pickerFormatChar${currentElemIndex}`] + this[`currentValue${currentElemIndex}`].slice(-1)
+    this.validationDateInputPatternEventListener = (event) => {
+      const currentDateInputIndex = event.currentTarget.getAttribute('node-index')
+      this[`currentDateInput${currentDateInputIndex}`] = event.data
+      this[`currentDateInputValue${currentDateInputIndex}`] = event.currentTarget.value
+      this[`currentDateInputSelectionStart${currentDateInputIndex}`] = event.currentTarget.selectionStart
+      this[`currentDateInputValueLength${currentDateInputIndex}`] = this[`currentDateInputValue${currentDateInputIndex}`].length
+      this[`isDateInputValueRemoved${currentDateInputIndex}`] = false
+
+      if (this[`currentInput${currentDateInputIndex}`] !== null) this.checkDateInputNextChar(currentDateInputIndex)
+      if (this[`currentDateInput${currentDateInputIndex}`] !== null && this[`currentDateInput${currentDateInputIndex}`] !== this[`dateInputFormatChar${currentDateInputIndex}`] && this[`dateFormat${currentDateInputIndex}`].split('')[this[`currentDateInputValue${currentDateInputIndex}`].length - 1] === this[`dateInputFormatChar${currentDateInputIndex}`]) {
+        this.getInputFieldByNodeIndex(currentDateInputIndex).value = this[`currentDateInputValue${currentDateInputIndex}`].slice(0, -1) + this[`dateInputFormatChar${currentDateInputIndex}`] + this[`currentDateInputValue${currentDateInputIndex}`].slice(-1)
       }
 
       // if remove
-      if (this[`currentInput${currentElemIndex}`] === null) {
-        this[`isRemovedByInput${currentElemIndex}`] = true
-        if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`]] === this[`pickerFormatChar${currentElemIndex}`] && this[`currentValue${currentElemIndex}`].length === this[`currentSelectionStart${currentElemIndex}`]) {
-          this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`]
+      if (this[`currentDateInput${currentDateInputIndex}`] === null) {
+        this[`isDateInputValueRemoved${currentDateInputIndex}`] = true
+        if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`]] === this[`dateInputFormatChar${currentDateInputIndex}`] && this[`currentDateInputValue${currentDateInputIndex}`].length === this[`currentDateInputSelectionStart${currentDateInputIndex}`]) {
+          this.getInputFieldByNodeIndex(currentDateInputIndex).value = this[`currentDateInputValue${currentDateInputIndex}`]
         }
-        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`]] === this[`pickerFormatChar${currentElemIndex}`] && this[`currentValue${currentElemIndex}`].length > this[`currentSelectionStart${currentElemIndex}`]) {
-          this.getInputFieldByNodeIndex(currentElemIndex).value = this[`currentValue${currentElemIndex}`].slice(0, this[`currentSelectionStart${currentElemIndex}`]) + this[`pickerFormatChar${currentElemIndex}`] + this[`currentValue${currentElemIndex}`].slice(this[`currentSelectionStart${currentElemIndex}`])
-          this.getInputFieldByNodeIndex(currentElemIndex).setSelectionRange(this[`currentSelectionStart${currentElemIndex}`], this[`currentSelectionStart${currentElemIndex}`])
+        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`]] === this[`dateInputFormatChar${currentDateInputIndex}`] && this[`currentDateInputValue${currentDateInputIndex}`].length > this[`currentDateInputSelectionStart${currentDateInputIndex}`]) {
+          this.getInputFieldByNodeIndex(currentDateInputIndex).value = this[`currentDateInputValue${currentDateInputIndex}`].slice(0, this[`currentDateInputSelectionStart${currentDateInputIndex}`]) + this[`dateInputFormatChar${currentDateInputIndex}`] + this[`currentDateInputValue${currentDateInputIndex}`].slice(this[`currentDateInputSelectionStart${currentDateInputIndex}`])
+          this.getInputFieldByNodeIndex(currentDateInputIndex).setSelectionRange(this[`currentDateInputSelectionStart${currentDateInputIndex}`], this[`currentDateInputSelectionStart${currentDateInputIndex}`])
         }
-      } else if (this[`currentInput${currentElemIndex}`] === this[`pickerFormatChar${currentElemIndex}`]) {
-        if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'd') {
-          this.formatInput(currentElemIndex, 'd')
+      } else if (this[`currentDateInput${currentDateInputIndex}`] === this[`dateInputFormatChar${currentDateInputIndex}`]) {
+        if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'day') {
+          this.formatDateInput(currentDateInputIndex, 'day')
         }
-        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'm') {
-          this.formatInput(currentElemIndex, 'm')
+        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'month') {
+          this.formatDateInput(currentDateInputIndex, 'month')
         }
-        else if (this[`pickerFormat${currentElemIndex}`][this[`currentSelectionStart${currentElemIndex}`] - 1] === 'y') {
-          this.formatInput(currentElemIndex, 'y')
+        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'year') {
+          this.formatDateInput(currentDateInputIndex, 'year')
         }
       }
     }
@@ -220,30 +220,30 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
               this.validationValues[node.getAttribute('name')] = this.validationValues[node.getAttribute('name')] ? Object.assign(this.validationValues[node.getAttribute('name')], { isTouched: false }) : {}
               this.validationValues[node.getAttribute('name')][key] = Object.assign(parsedRules[key], { isValid: false })
               if (this.validationValues[node.getAttribute('name')].pattern && Object.prototype.hasOwnProperty.call(this.validationValues[node.getAttribute('name')].pattern, 'mask-value')) {
-                if (node.hasAttribute('only-number-date-input')) node.addEventListener('input', this.validationDatePatternInputEventListener)
+                if (node.hasAttribute('m-date-input')) node.addEventListener('input', this.validationDateInputPatternEventListener)
                 else node.addEventListener('input', this.validationPatternInputEventListener)
               }
             })
           }
         }
-        if (node.hasAttribute('only-number-date-input') && !node.hasAttribute('node-index')) {
+        if (node.hasAttribute('m-date-input') && !node.hasAttribute('node-index')) {
           node.setAttribute('node-index', index)
-          this[`pickerFormat${index}`] = this.validationValues[node.getAttribute('name')].pattern['mask-value'] ?? 'dd/mm/yyyy'
+          this[`dateFormat${index}`] = this.validationValues[node.getAttribute('name')].pattern['mask-value'] ?? 'dd/mm/yyyy'
 
-          if (this[`pickerFormat${index}`].includes('/')) this[`pickerFormatChar${index}`] = '/'
-          else if (this[`pickerFormat${index}`].includes('.')) this[`pickerFormatChar${index}`] = '.'
-          else if (this[`pickerFormat${index}`].includes('-')) this[`pickerFormatChar${index}`] = '-'
+          if (this[`dateFormat${index}`].includes('/')) this[`dateInputFormatChar${index}`] = '/'
+          else if (this[`dateFormat${index}`].includes('.')) this[`dateInputFormatChar${index}`] = '.'
+          else if (this[`dateFormat${index}`].includes('-')) this[`dateInputFormatChar${index}`] = '-'
 
-          this[`formIndexes${index}`] = {
+          this[`dateInputFormIndexes${index}`] = {
             formatChar: Array(),
-            d: Array(),
-            m: Array(),
-            y: Array()
+            day: Array(),
+            month: Array(),
+            year: Array()
           }
-          this.setFormIndexes(index)
+          this.setDateInputFormIndexes(index)
 
-          node.setAttribute('maxlength', `${this[`pickerFormat${index}`].length}`)
-          node.addEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
+          node.setAttribute('maxlength', `${this[`dateFormat${index}`].length}`)
+          node.addEventListener('keydown', this.setDateInputAllowedKeys)
         }
       })
     }
@@ -309,7 +309,10 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
             })
           }
         }
-        if (node.hasAttribute('only-number-date-input')) node.removeEventListener('keydown', this.setOnlyNumbersInputAllowedKeys)
+        if (node.hasAttribute('m-date-input')) {
+          node.removeEventListener('keydown', this.setDateInputAllowedKeys)
+          node.removeEventListener('input', this.validationDateInputPatternEventListener)
+        }
       })
     }
     if (this.submitButton) {
@@ -372,7 +375,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           const isPatternValueValidationValid = re.test(currentInput.value)
           this.setValidity(inputFieldName, validationName, isPatternValueValidationValid)
         }
-        if (validationRules.pattern['mask-value'] && !validationRules.d) {
+        if (validationRules.pattern['mask-value'] && !validationRules['day']) {
           const maskValue = validationRules.pattern['mask-value']
           let currentInputValue = currentInput.value
 
@@ -381,7 +384,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           const isPatternMaskValueValidationValid = this.validationPatternEnd(inputFieldName, validationName, currentInputValue)
           this.setValidity(inputFieldName, validationName, isPatternMaskValueValidationValid)
         }
-        if (validationRules.pattern['mask-value'] && validationRules.d) {
+        if (validationRules.pattern['mask-value'] && validationRules['day']) {
           const currentFieldIndex = currentInput.getAttribute('node-index')
           const mainDateFormatValid = this.customMainDateFormatValidator(currentFieldIndex)
           this.setValidity(inputFieldName, validationName, mainDateFormatValid)
@@ -398,19 +401,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         const isMaxDateValidationValid = !!(new Date(currentInput.value) < new Date(validationRules['max-date-value'].value))
         this.setValidity(inputFieldName, validationName, isMaxDateValidationValid)
       }
-      if (validationName === 'd') {
+      if (validationName === 'day') {
         const currentFieldIndex = currentInput.getAttribute('node-index')
-        const isDayValidationValid = this.customDateValidator('d', +validationRules['d'].min, +validationRules['d'].max, currentFieldIndex)
+        const isDayValidationValid = this.customDateInputValidator('day', +validationRules['day'].min, +validationRules['day'].max, currentFieldIndex)
         this.setValidity(inputFieldName, validationName, isDayValidationValid)
       }
-      if (validationName === 'm') {
+      if (validationName === 'month') {
         const currentFieldIndex = currentInput.getAttribute('node-index')
-        const isMonthValidationValid = this.customDateValidator('m', +validationRules['m'].min, +validationRules['m'].max, currentFieldIndex)
+        const isMonthValidationValid = this.customDateInputValidator('month', +validationRules['month'].min, +validationRules['month'].max, currentFieldIndex)
         this.setValidity(inputFieldName, validationName, isMonthValidationValid)
       }
-      if (validationName === 'y') {
+      if (validationName === 'year') {
         const currentFieldIndex = currentInput.getAttribute('node-index')
-        const isYearValidationValid = this.customDateValidator('y', +validationRules['y'].min, +validationRules['y'].max, currentFieldIndex)
+        const isYearValidationValid = this.customDateInputValidator('year', +validationRules['year'].min, +validationRules['year'].max, currentFieldIndex)
         this.setValidity(inputFieldName, validationName, isYearValidationValid)
       }
     })
@@ -584,10 +587,10 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     return el
   }
 
-  setOnlyNumbersInputAllowedKeys = (event) => {
-    const currentNodeIndex = event.currentTarget.getAttribute('node-index')
+  setDateInputAllowedKeys = (event) => {
+    const currentDateInputIndex = event.currentTarget.getAttribute('node-index')
     const keyCode = event.which
-    if (event.key == this[`pickerFormatChar${currentNodeIndex}`]) { }
+    if (event.key == this[`dateInputFormatChar${currentDateInputIndex}`]) { }
     else if (keyCode == 32) {
       event.preventDefault()
       return false
@@ -598,21 +601,21 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
   }
 
-  setFormIndexes(index) {
-    this[`pickerFormat${index}`].split('').forEach((char, index2) => {
-      if (char === 'd') this[`formIndexes${index}`].d.push(index2)
-      else if (char === 'm') this[`formIndexes${index}`].m.push(index2)
-      else if (char === 'y') this[`formIndexes${index}`].y.push(index2)
-      else if (char === this[`pickerFormatChar${index}`]) this[`formIndexes${index}`].formatChar.push(index2)
+  setDateInputFormIndexes(index) {
+    this[`dateFormat${index}`].split('').forEach((char, index2) => {
+      if (char === 'd') this[`dateInputFormIndexes${index}`]['day'].push(index2)
+      else if (char === 'm') this[`dateInputFormIndexes${index}`]['month'].push(index2)
+      else if (char === 'y') this[`dateInputFormIndexes${index}`]['year'].push(index2)
+      else if (char === this[`dateInputFormatChar${index}`]) this[`dateInputFormIndexes${index}`].formatChar.push(index2)
     })
   }
 
-  checkNextChar(index, formatCharTyped) {
-    if (this[`pickerFormat${index}`][this[`currentValueLength${index}`]] && this[`pickerFormat${index}`][this[`currentValueLength${index}`]] === this[`pickerFormatChar${index}`]) {
-      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+  checkDateInputNextChar(index, formatCharTyped) {
+    if (this[`dateFormat${index}`][this[`currentDateInputValueLength${index}`]] && this[`dateFormat${index}`][this[`currentDateInputValueLength${index}`]] === this[`dateInputFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`]
     }
-    if (formatCharTyped && this[`pickerFormat${index}`][this[`currentValueLength${index}`] + 1] === this[`pickerFormatChar${index}`]) {
-      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+    if (formatCharTyped && this[`dateFormat${index}`][this[`currentDateInputValueLength${index}`] + 1] === this[`dateInputFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`]
     }
   }
 
@@ -620,77 +623,77 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     if (this.root.querySelector(`input[node-index="${nodeIndex}"]`)) return this.root.querySelector(`input[node-index="${nodeIndex}"]`)
   }
 
-  formatInput(index, dateType) {
+  formatDateInput(index, dateType) {
     this[`currentValue${index}`].split('').forEach((char, index2) => {
-      if (this[`formIndexes${index}`][dateType].includes(index2)) {
-        if (char === this[`pickerFormatChar${index}`]) {
+      if (this[`dateInputFormIndexes${index}`][dateType].includes(index2)) {
+        if (char === this[`dateInputFormatChar${index}`]) {
           let currentDateTypeValue = Array()
-          this[`formIndexes${index}`][dateType].forEach(ind => {
-            if (this[`currentValue${index}`][ind] === this[`pickerFormatChar${index}`] || !this[`currentValue${index}`][ind]) {
+          this[`dateInputFormIndexes${index}`][dateType].forEach(ind => {
+            if (this[`currentValue${index}`][ind] === this[`dateInputFormatChar${index}`] || !this[`currentValue${index}`][ind]) {
               currentDateTypeValue.unshift('0')
             } else {
               currentDateTypeValue.unshift(this[`currentValue${index}`][ind])
             }
           })
           let inputFieldValue = this[`currentValue${index}`].split('')
-          this[`formIndexes${index}`][dateType].forEach((ind, i) => {
+          this[`dateInputFormIndexes${index}`][dateType].forEach((ind, i) => {
             inputFieldValue[ind] = currentDateTypeValue[i]
           })
           this.getInputFieldByNodeIndex(index).value = inputFieldValue.join('')
-          this.checkNextChar(index, true)
+          this.checkDateInputNextChar(index, true)
         }
       }
     })
   }
 
-  customDateValidator(type, min, max, index) {
-    let currentValueString = ''
-    let currentValueNumber = 0
+  customDateInputValidator(type, min, max, index) {
+    let currentValueAsString = ''
+    let currentValueAsNumber = 0
 
-    this[`formIndexes${index}`][type].forEach(ind => {
+    this[`dateInputFormIndexes${index}`][type].forEach(ind => {
       if (this.getInputFieldByNodeIndex(index).value[ind]) {
-        currentValueString = currentValueString + this.getInputFieldByNodeIndex(index).value[ind]
-        let currentValueStringArray = currentValueString.split('').filter(char => char !== this[`pickerFormatChar${index}`])
-        currentValueString = currentValueStringArray.join('')
+        currentValueAsString = currentValueAsString + this.getInputFieldByNodeIndex(index).value[ind]
+        let currentValueAsStringArray = currentValueAsString.split('').filter(char => char !== this[`dateInputFormatChar${index}`])
+        currentValueAsString = currentValueAsStringArray.join('')
       }
     })
 
 
-    currentValueNumber = +currentValueString || 0
+    currentValueAsNumber = +currentValueAsString || 0
 
-    if (min <= currentValueNumber && currentValueNumber <= max) return true
+    if (min <= currentValueAsNumber && currentValueAsNumber <= max) return true
     else return false
   }
 
   customMainDateFormatValidator(index) {
     let mainValidation = true
-    this[`formIndexes${index}`].formatChar.forEach(ind => {
-      if (this.getInputFieldByNodeIndex(index).value[ind] !== this[`pickerFormatChar${index}`]) mainValidation = false
+    this[`dateInputFormIndexes${index}`].formatChar.forEach(ind => {
+      if (this.getInputFieldByNodeIndex(index).value[ind] !== this[`dateInputFormatChar${index}`]) mainValidation = false
     })
-    if (this.getInputFieldByNodeIndex(index).value.length !== this[`pickerFormat${index}`].length) mainValidation = false
+    if (this.getInputFieldByNodeIndex(index).value.length !== this[`dateFormat${index}`].length) mainValidation = false
     return mainValidation
   }
 
-  addZeroIfNeeded(dateType, index) {
-    let currentDateUnit = this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][0], this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1] + 1)
-    let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this[`pickerFormatChar${index}`])
+  dateInputAddZeroIfNeeded(dateType, index) {
+    let currentDateUnit = this.getInputFieldByNodeIndex(index).value.slice(this[`dateInputFormIndexes${index}`][dateType][0], this[`dateInputFormIndexes${index}`][dateType][this[`dateInputFormIndexes${index}`][dateType].length - 1] + 1)
+    let newCurrentDateUnit = currentDateUnit.split('').filter(el => el !== this[`dateInputFormatChar${index}`])
 
-    if (newCurrentDateUnit.length !== this[`formIndexes${index}`][dateType].length) {
+    if (newCurrentDateUnit.length !== this[`dateInputFormIndexes${index}`][dateType].length) {
       let currentFormatCharIndexes = []
       this.getInputFieldByNodeIndex(index).value.split('').forEach((char, index2) => {
-        char === this[`pickerFormatChar${index}`] ? currentFormatCharIndexes.push(index2) : ''
+        char === this[`dateInputFormatChar${index}`] ? currentFormatCharIndexes.push(index2) : ''
       })
 
-      let lengthDiff = this[`formIndexes${index}`][dateType].length - newCurrentDateUnit.length
+      let lengthDiff = this[`dateInputFormIndexes${index}`][dateType].length - newCurrentDateUnit.length
       for (let i = 0; i < lengthDiff; i++) {
-        if (dateType === 'y') newCurrentDateUnit.push('0')
+        if (dateType === 'year') newCurrentDateUnit.push('0')
         else newCurrentDateUnit.unshift('0')
       }
 
       let formatCharsNextToEachOther = currentFormatCharIndexes.find((el, index) => el + 1 === currentFormatCharIndexes[index + 1])
 
-      if (formatCharsNextToEachOther || this.getInputFieldByNodeIndex(index).value[0] === this[`pickerFormatChar${index}`]) {
-        newCurrentDateUnit = ['0', '1', this[`pickerFormatChar${index}`]]
+      if (formatCharsNextToEachOther || this.getInputFieldByNodeIndex(index).value[0] === this[`dateInputFormatChar${index}`]) {
+        newCurrentDateUnit = ['0', '1', this[`dateInputFormatChar${index}`]]
       } else {
         let isAllZero = true
         newCurrentDateUnit.forEach(num => +num !== 0 ? isAllZero = false : '')
@@ -700,14 +703,14 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         }
       }
 
-      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`formIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`formIndexes${index}`][dateType][this[`formIndexes${index}`][dateType].length - 1])
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value.slice(0, this[`dateInputFormIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`dateInputFormIndexes${index}`][dateType][this[`dateInputFormIndexes${index}`][dateType].length - 1])
 
-      if (this[`pickerFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`pickerFormatChar${index}`]) {
-        this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+      if (this[`dateFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`dateInputFormatChar${index}`]) {
+        this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`]
       }
     }
-    if (this[`pickerFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`pickerFormatChar${index}`] && this.getInputFieldByNodeIndex(index).value[this.getInputFieldByNodeIndex(index).value.length - 1] !== this[`pickerFormatChar${index}`]) {
-      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`pickerFormatChar${index}`]
+    if (this[`dateFormat${index}`][this.getInputFieldByNodeIndex(index).value.length] === this[`dateInputFormatChar${index}`] && this.getInputFieldByNodeIndex(index).value[this.getInputFieldByNodeIndex(index).value.length - 1] !== this[`dateInputFormatChar${index}`]) {
+      this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`]
     }
   }
 }

From fd1e503352df9f887dd3b5e5e802a81d50485f10 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Mon, 4 Nov 2024 16:28:29 +0100
Subject: [PATCH 31/35] WIP Solving removing scenario

---
 src/es/components/prototypes/Validation.js | 27 +++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 8a0d0664d..40b5093ab 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -22,13 +22,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
       if (event.type === 'change' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
         const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+
+        let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(currentDateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
+        let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
+
+        if (this[`isDateInputValueRemoved${currentDateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) {
+          let result = this.findDifference(this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value, this[`oldDateInputValue${currentDateInputNodeIndex}`])
+          //console.log("res", result)
+          //this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = ''
+        }
         if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][0]) this.dateInputAddZeroIfNeeded('day', currentDateInputNodeIndex)
         if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][0]) this.dateInputAddZeroIfNeeded('month', currentDateInputNodeIndex)
         if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['year'][0]) this.dateInputAddZeroIfNeeded('year', currentDateInputNodeIndex)
 
-        let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(currentDateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
-        let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
-        if (this[`isDateInputValueRemoved${currentDateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = ''
 
         this[`oldDateInputValue${currentDateInputNodeIndex}`] = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value
       }
@@ -713,4 +719,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`]
     }
   }
+
+  findDifference(newString, oldString, index) {
+    if (!newString) return
+    let newStringArray = newString.split('.')
+    let oldStringArray = oldString.split('.')
+    let testDiff = oldStringArray.filter(unit => !newStringArray.includes(unit))
+    let newValue = ''
+
+    if (testDiff.length > 0) {
+      // do further from here
+      // newValue = 
+    }
+
+
+  }
 }

From 4155cabb71d4d1a7c106c3dd354b5455461d3c1f Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Tue, 5 Nov 2024 16:02:31 +0100
Subject: [PATCH 32/35] Improved removing logic from date input

---
 src/es/components/prototypes/Validation.js | 49 ++++++++++++----------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 40b5093ab..6a4f6dab0 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -27,9 +27,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
 
         if (this[`isDateInputValueRemoved${currentDateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) {
-          let result = this.findDifference(this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value, this[`oldDateInputValue${currentDateInputNodeIndex}`])
-          //console.log("res", result)
-          //this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = ''
+          this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = this.setFormatOfDateInput(this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value, this[`oldDateInputValue${currentDateInputNodeIndex}`], currentDateInputNodeIndex, inputFieldName)
         }
         if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][0]) this.dateInputAddZeroIfNeeded('day', currentDateInputNodeIndex)
         if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][0]) this.dateInputAddZeroIfNeeded('month', currentDateInputNodeIndex)
@@ -68,7 +66,7 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       this[`currentDateInputValueLength${currentDateInputIndex}`] = this[`currentDateInputValue${currentDateInputIndex}`].length
       this[`isDateInputValueRemoved${currentDateInputIndex}`] = false
 
-      if (this[`currentInput${currentDateInputIndex}`] !== null) this.checkDateInputNextChar(currentDateInputIndex)
+      if (this[`currentDateInput${currentDateInputIndex}`] !== null) this.checkDateInputNextChar(currentDateInputIndex)
       if (this[`currentDateInput${currentDateInputIndex}`] !== null && this[`currentDateInput${currentDateInputIndex}`] !== this[`dateInputFormatChar${currentDateInputIndex}`] && this[`dateFormat${currentDateInputIndex}`].split('')[this[`currentDateInputValue${currentDateInputIndex}`].length - 1] === this[`dateInputFormatChar${currentDateInputIndex}`]) {
         this.getInputFieldByNodeIndex(currentDateInputIndex).value = this[`currentDateInputValue${currentDateInputIndex}`].slice(0, -1) + this[`dateInputFormatChar${currentDateInputIndex}`] + this[`currentDateInputValue${currentDateInputIndex}`].slice(-1)
       }
@@ -84,13 +82,13 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
           this.getInputFieldByNodeIndex(currentDateInputIndex).setSelectionRange(this[`currentDateInputSelectionStart${currentDateInputIndex}`], this[`currentDateInputSelectionStart${currentDateInputIndex}`])
         }
       } else if (this[`currentDateInput${currentDateInputIndex}`] === this[`dateInputFormatChar${currentDateInputIndex}`]) {
-        if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'day') {
+        if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'd') {
           this.formatDateInput(currentDateInputIndex, 'day')
         }
-        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'month') {
+        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'm') {
           this.formatDateInput(currentDateInputIndex, 'month')
         }
-        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'year') {
+        else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'y') {
           this.formatDateInput(currentDateInputIndex, 'year')
         }
       }
@@ -630,18 +628,18 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
   }
 
   formatDateInput(index, dateType) {
-    this[`currentValue${index}`].split('').forEach((char, index2) => {
+    this[`currentDateInputValue${index}`].split('').forEach((char, index2) => {
       if (this[`dateInputFormIndexes${index}`][dateType].includes(index2)) {
         if (char === this[`dateInputFormatChar${index}`]) {
           let currentDateTypeValue = Array()
           this[`dateInputFormIndexes${index}`][dateType].forEach(ind => {
-            if (this[`currentValue${index}`][ind] === this[`dateInputFormatChar${index}`] || !this[`currentValue${index}`][ind]) {
+            if (this[`currentDateInputValue${index}`][ind] === this[`dateInputFormatChar${index}`] || !this[`currentDateInputValue${index}`][ind]) {
               currentDateTypeValue.unshift('0')
             } else {
-              currentDateTypeValue.unshift(this[`currentValue${index}`][ind])
+              currentDateTypeValue.unshift(this[`currentDateInputValue${index}`][ind])
             }
           })
-          let inputFieldValue = this[`currentValue${index}`].split('')
+          let inputFieldValue = this[`currentDateInputValue${index}`].split('')
           this[`dateInputFormIndexes${index}`][dateType].forEach((ind, i) => {
             inputFieldValue[ind] = currentDateTypeValue[i]
           })
@@ -720,18 +718,23 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
   }
 
-  findDifference(newString, oldString, index) {
-    if (!newString) return
-    let newStringArray = newString.split('.')
-    let oldStringArray = oldString.split('.')
-    let testDiff = oldStringArray.filter(unit => !newStringArray.includes(unit))
-    let newValue = ''
-
-    if (testDiff.length > 0) {
-      // do further from here
-      // newValue = 
+  setFormatOfDateInput(newDateInput, oldDateInput, nodeIndex, inputFieldName) {
+    if (!newDateInput) return ''
+    let newDateInputValue = oldDateInput
+    let newDateInputArray = newDateInput.split(this[`dateInputFormatChar${nodeIndex}`]).filter(unit => unit)
+    let oldDateInputArray = oldDateInput.split(this[`dateInputFormatChar${nodeIndex}`]).filter(unit => unit)
+    let diffBetweenOldAndNewArray = oldDateInputArray.filter(unit => !newDateInputArray.includes(unit)).filter(unit => unit)
+    if ((diffBetweenOldAndNewArray.length === 1 && diffBetweenOldAndNewArray[0].length === 4) || (diffBetweenOldAndNewArray.length === 1 && diffBetweenOldAndNewArray[0] === oldDateInputArray[oldDateInputArray.length - 1]) || (diffBetweenOldAndNewArray.length === 2 && diffBetweenOldAndNewArray[0] === oldDateInputArray[oldDateInputArray.length - 2] && diffBetweenOldAndNewArray[1] === oldDateInputArray[oldDateInputArray.length - 1])) {
+      return newDateInput
     }
-
-
+    if (diffBetweenOldAndNewArray.length > 0) {
+      diffBetweenOldAndNewArray.forEach(el => {
+        let currentContentIndex = oldDateInputArray.findIndex(oldEl => el === oldEl)
+        if (oldDateInputArray[currentContentIndex].length === 2) oldDateInputArray[currentContentIndex] = "01"
+        if (oldDateInputArray[currentContentIndex].length === 4) oldDateInputArray[currentContentIndex] = this.validationValues[inputFieldName]['year']['min']
+        newDateInputValue = oldDateInputArray.join(this[`dateInputFormatChar${nodeIndex}`])
+      })
+    }
+    return newDateInputValue
   }
 }

From c08d39d84f23569c7c0116ccba8a4d04e92b44de Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 8 Nov 2024 15:08:27 +0100
Subject: [PATCH 33/35] Added live input date validation

---
 src/es/components/prototypes/Validation.js | 82 +++++++++++++++++-----
 1 file changed, 64 insertions(+), 18 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 6a4f6dab0..9b44e4e9a 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -22,7 +22,6 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
 
       if (event.type === 'change' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
         const currentDateInputNodeIndex = inputField.getAttribute('node-index')
-
         let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(currentDateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
         let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
 
@@ -37,12 +36,54 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         this[`oldDateInputValue${currentDateInputNodeIndex}`] = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value
       }
 
+      if (event.type === 'input' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
+        const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+        let currentValueAsStringArray = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.split(this[`dateInputFormatChar${currentDateInputNodeIndex}`]).filter(char => char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+        if (currentValueAsStringArray[0] && currentValueAsStringArray[0][0] > 3 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][1]) {
+          currentValueAsStringArray[0] = '0' + currentValueAsStringArray[0] + this[`dateInputFormatChar${currentDateInputNodeIndex}`]
+        }
+        if (currentValueAsStringArray[1] && currentValueAsStringArray[1][0] > 1 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][1]) {
+          currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1] + this[`dateInputFormatChar${currentDateInputNodeIndex}`]
+        }
+        this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+      }
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
       if (this.realTimeSubmitButton) {
         this.checkIfFormValid()
       }
     }
 
+    this.dateInputFormatterEventListener = (event) => {
+      const inputField = event.currentTarget
+      const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+      let currentValueAsStringArray = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.split(this[`dateInputFormatChar${currentDateInputNodeIndex}`]).filter(char => char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+      if (currentValueAsStringArray[0] && currentValueAsStringArray[0][0] > 3 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][1]) {
+        currentValueAsStringArray[0] = '0' + currentValueAsStringArray[0]
+      }
+      if (currentValueAsStringArray[1] && currentValueAsStringArray[1][0] > 1 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][1]) {
+        currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1]
+      }
+      currentValueAsStringArray = currentValueAsStringArray.filter(char => char && char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+      this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+    }
+
+    this.dateInputValidationChangeEventListener = (event) => {
+      const inputField = event.currentTarget
+      const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+      const currentValidatedInputHasNewErrorReferencePoint = inputField.getAttribute('error-message-reference-point-changed') === 'true'
+      const currentValidatedInputErrorTextWrapper = inputField.errorTextWrapper ? inputField.errorTextWrapper : currentValidatedInputHasNewErrorReferencePoint ? inputField.closest('[new-error-message-reference-point="true"]').parentElement.querySelector('div.custom-error-text') : inputField.parentElement.querySelector('div.custom-error-text')
+      const errorMessages = Array.from(currentValidatedInputErrorTextWrapper.querySelectorAll('[error-text-id]'))
+      const activeErrorTextIndex = errorMessages?.findIndex(errorText => !errorText.hasAttribute('hidden'))
+      const currentErrorMessage = errorMessages[activeErrorTextIndex]
+      const currentErrorMessageId = currentErrorMessage?.getAttribute('error-text-id')
+
+      errorMessages[activeErrorTextIndex]?.setAttribute('hidden', true)
+
+      if (this[`dateInputFormIndexes${currentDateInputNodeIndex}`][currentErrorMessageId] && inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`][currentErrorMessageId][0]) {
+        errorMessages[activeErrorTextIndex].removeAttribute('hidden')
+      }
+    }
+
     this.validationPatternInputEventListener = (event) => {
       const inputField = event.currentTarget
       const maskPattern = this.validationValues[event.currentTarget.getAttribute('name')].pattern['mask-value']
@@ -211,9 +252,20 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         node.errorTextWrapper = errorTextWrapper
 
         if (nodeHasLiveValidation) {
+          if (node.hasAttribute('m-date-input')) {
+            node.addEventListener('input', this.validationDateInputPatternEventListener)
+          }
+
           node.addEventListener('input', this.validationChangeEventListener)
+
+          if (node.hasAttribute('m-date-input')) {
+            node.addEventListener('input', this.dateInputValidationChangeEventListener)
+            node.addEventListener('change', this.validationChangeEventListener)
+          }
+
         } else {
           node.addEventListener('change', this.validationChangeEventListener)
+          node.addEventListener('input', this.dateInputFormatterEventListener)
         }
         node.addEventListener('input', this.baseInputChangeListener)
         // IMPORTANT name attribute has to be unique and always available
@@ -430,18 +482,23 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     const currentValidatedInputErrorTextWrapper = currentValidatedInput.errorTextWrapper ? currentValidatedInput.errorTextWrapper : currentValidatedInputHasNewErrorReferencePoint ? currentValidatedInput.closest('[new-error-message-reference-point="true"]').parentElement.querySelector('div.custom-error-text') : currentValidatedInput.parentElement.querySelector('div.custom-error-text')
     const isCurrentValidatedInputErrorTextWrapperFilled = currentValidatedInputErrorTextWrapper.querySelector('p')
     const isValidValues = []
+    if (!this.validationValues[inputFieldName]['required'] && currentValidatedInput.value === '') {
+      Object.keys(this.validationValues[inputFieldName]).forEach(key => {
+        if (Object.prototype.hasOwnProperty.call(this.validationValues[inputFieldName][key], 'isValid')) this.validationValues[inputFieldName][key]['isValid'] = true
+      })
+    }
     if (!currentValidatedInput.hasAttribute('disabled')) {
       Object.keys(this.validationValues[inputFieldName]).forEach(key => {
         if (Object.prototype.hasOwnProperty.call(this.validationValues[inputFieldName][key], 'isValid')) isValidValues.push(this.validationValues[inputFieldName][key].isValid)
         if (!isCurrentValidatedInputErrorTextWrapperFilled) {
           if (Object.prototype.hasOwnProperty.call(this.validationValues[inputFieldName][key], 'error-message')) {
             if (currentValidatedInput.hasAttribute('no-error-text-p')) {
-              currentValidatedInputErrorTextWrapper.setAttribute('error-text-id', validationName)
+              currentValidatedInputErrorTextWrapper.setAttribute('error-text-id', key)
               currentValidatedInputErrorTextWrapper.hidden = true
               currentValidatedInputErrorTextWrapper.textContent = this.validationValues[inputFieldName][key]['error-message']
             } else {
               const errorText = document.createElement('p')
-              errorText.setAttribute('error-text-id', validationName)
+              errorText.setAttribute('error-text-id', key)
               errorText.hidden = true
               errorText.textContent = this.validationValues[inputFieldName][key]['error-message']
               currentValidatedInputErrorTextWrapper.appendChild(errorText)
@@ -651,21 +708,10 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
   }
 
   customDateInputValidator(type, min, max, index) {
-    let currentValueAsString = ''
-    let currentValueAsNumber = 0
-
-    this[`dateInputFormIndexes${index}`][type].forEach(ind => {
-      if (this.getInputFieldByNodeIndex(index).value[ind]) {
-        currentValueAsString = currentValueAsString + this.getInputFieldByNodeIndex(index).value[ind]
-        let currentValueAsStringArray = currentValueAsString.split('').filter(char => char !== this[`dateInputFormatChar${index}`])
-        currentValueAsString = currentValueAsStringArray.join('')
-      }
-    })
-
-
-    currentValueAsNumber = +currentValueAsString || 0
-
-    if (min <= currentValueAsNumber && currentValueAsNumber <= max) return true
+    let currentValueAsStringArray = this.getInputFieldByNodeIndex(index).value.split(this[`dateInputFormatChar${index}`]).filter(char => char !== this[`dateInputFormatChar${index}`])
+    if (type === 'day') return (min <= +currentValueAsStringArray[0] && +currentValueAsStringArray[0] <= max) ? true : false
+    else if (type === 'month') return (min <= +currentValueAsStringArray[1] && +currentValueAsStringArray[1] <= max) ? true : false
+    else if (type === 'year') return (min <= +currentValueAsStringArray[2] && +currentValueAsStringArray[2] <= max) ? true : false
     else return false
   }
 

From e4de790b4337aa78cd7b33afc3c840d3cd40d829 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 8 Nov 2024 15:24:56 +0100
Subject: [PATCH 34/35] updated demo html

---
 .../molecules/simpleForm/default-/formValidation.html     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html
index 5218606ac..8ab15f9b4 100644
--- a/src/es/components/molecules/simpleForm/default-/formValidation.html
+++ b/src/es/components/molecules/simpleForm/default-/formValidation.html
@@ -30,8 +30,8 @@
      }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" />
     </div>
     <div>
-      <label for="birth">Birthday1</label>
-      <input id="birth" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      <label for="birth">Birthday 1 + <strong>live-input-validation</strong></label>
+      <input id="birth" live-input-validation="true" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
       "day": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
       "month": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
       "year": {"max": "2010", "min": "1900", "error-message": "Please add a valid year, between 1900 and 2010."},
@@ -48,8 +48,8 @@
      }' type="text" value="" name="birth2" placeholder="DD/MM/YYYY" autocomplete="off" />
     </div>
     <div>
-      <label for="birth3">Birthday 3</label>
-      <input id="birth3" m-date-input data-m-v-rules='{"required": {"error-message": "Bitte diese Feld ausfüllen."},
+      <label for="birth3">Birthday 3 + <strong>not required</strong></label>
+      <input id="birth3" m-date-input data-m-v-rules='{
       "day": {"max": "31", "min": "1", "error-message": "Please add a valid day, between 1 and 31."},
       "month": {"max": "12", "min": "1", "error-message": "Please add a valid month, between 1 and 12."},
       "year": {"max": "2000", "min": "1800", "error-message": "Please add a valid year, between 1800 and 2000."},

From 4571c50b8570307ce116146cdcdc217199a8e909 Mon Sep 17 00:00:00 2001
From: rs-mgb <roland.szabo@mgb.ch>
Date: Fri, 8 Nov 2024 15:56:47 +0100
Subject: [PATCH 35/35] WIP Refactoring

---
 src/es/components/prototypes/Validation.js | 44 +++++++++++-----------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/es/components/prototypes/Validation.js b/src/es/components/prototypes/Validation.js
index 9b44e4e9a..39f6e4d47 100644
--- a/src/es/components/prototypes/Validation.js
+++ b/src/es/components/prototypes/Validation.js
@@ -21,31 +21,31 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
       const inputFieldName = inputField.getAttribute('name')
 
       if (event.type === 'change' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
-        const currentDateInputNodeIndex = inputField.getAttribute('node-index')
-        let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(currentDateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
-        let dateInputOldFormatCharLength = this[`oldDateInputValue${currentDateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${currentDateInputNodeIndex}`]).length
+        let dateInputNodeIndex = inputField.getAttribute('node-index')
+        let dateInputCurrentFormatCharLength = this.getInputFieldByNodeIndex(dateInputNodeIndex)?.value.split('').filter(char => char === this[`dateInputFormatChar${dateInputNodeIndex}`]).length
+        let dateInputOldFormatCharLength = this[`oldDateInputValue${dateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${dateInputNodeIndex}`]).length
 
-        if (this[`isDateInputValueRemoved${currentDateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) {
-          this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = this.setFormatOfDateInput(this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value, this[`oldDateInputValue${currentDateInputNodeIndex}`], currentDateInputNodeIndex, inputFieldName)
+        if (this[`isDateInputValueRemoved${dateInputNodeIndex}`] && dateInputOldFormatCharLength > 0 && dateInputCurrentFormatCharLength !== dateInputOldFormatCharLength) {
+          this.getInputFieldByNodeIndex(dateInputNodeIndex).value = this.setFormatOfDateInput(this.getInputFieldByNodeIndex(dateInputNodeIndex).value, this[`oldDateInputValue${dateInputNodeIndex}`], dateInputNodeIndex, inputFieldName)
         }
-        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][0]) this.dateInputAddZeroIfNeeded('day', currentDateInputNodeIndex)
-        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][0]) this.dateInputAddZeroIfNeeded('month', currentDateInputNodeIndex)
-        if (inputField.value.length > this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['year'][0]) this.dateInputAddZeroIfNeeded('year', currentDateInputNodeIndex)
 
+        if (inputField.value.length > this[`dateInputFormIndexes${dateInputNodeIndex}`]['day'][0]) this.dateInputAddZeroIfNeeded('day', dateInputNodeIndex)
+        if (inputField.value.length > this[`dateInputFormIndexes${dateInputNodeIndex}`]['month'][0]) this.dateInputAddZeroIfNeeded('month', dateInputNodeIndex)
+        if (inputField.value.length > this[`dateInputFormIndexes${dateInputNodeIndex}`]['year'][0]) this.dateInputAddZeroIfNeeded('year', dateInputNodeIndex)
 
-        this[`oldDateInputValue${currentDateInputNodeIndex}`] = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value
+        this[`oldDateInputValue${dateInputNodeIndex}`] = this.getInputFieldByNodeIndex(dateInputNodeIndex).value
       }
 
       if (event.type === 'input' && this.validationValues[inputFieldName]['day'] && this.validationValues[inputFieldName]['month'] && this.validationValues[inputFieldName]['year'] && inputField.hasAttribute('node-index')) {
-        const currentDateInputNodeIndex = inputField.getAttribute('node-index')
-        let currentValueAsStringArray = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.split(this[`dateInputFormatChar${currentDateInputNodeIndex}`]).filter(char => char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
-        if (currentValueAsStringArray[0] && currentValueAsStringArray[0][0] > 3 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][1]) {
-          currentValueAsStringArray[0] = '0' + currentValueAsStringArray[0] + this[`dateInputFormatChar${currentDateInputNodeIndex}`]
+        let dateInputNodeIndex = inputField.getAttribute('node-index')
+        let currentValueAsStringArray = this.getInputFieldByNodeIndex(dateInputNodeIndex).value.split(this[`dateInputFormatChar${dateInputNodeIndex}`]).filter(char => char !== this[`dateInputFormatChar${dateInputNodeIndex}`])
+        if (currentValueAsStringArray[0] && currentValueAsStringArray[0][0] > 3 && this.getInputFieldByNodeIndex(dateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${dateInputNodeIndex}`]['day'][1]) {
+          currentValueAsStringArray[0] = '0' + currentValueAsStringArray[0] + this[`dateInputFormatChar${dateInputNodeIndex}`]
         }
-        if (currentValueAsStringArray[1] && currentValueAsStringArray[1][0] > 1 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][1]) {
-          currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1] + this[`dateInputFormatChar${currentDateInputNodeIndex}`]
+        if (currentValueAsStringArray[1] && currentValueAsStringArray[1][0] > 1 && this.getInputFieldByNodeIndex(dateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${dateInputNodeIndex}`]['month'][1]) {
+          currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1] + this[`dateInputFormatChar${dateInputNodeIndex}`]
         }
-        this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+        this.getInputFieldByNodeIndex(dateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${dateInputNodeIndex}`])
       }
       this.validator(this.validationValues[inputFieldName], inputField, inputFieldName)
       if (this.realTimeSubmitButton) {
@@ -54,15 +54,18 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
     }
 
     this.dateInputFormatterEventListener = (event) => {
-      const inputField = event.currentTarget
-      const currentDateInputNodeIndex = inputField.getAttribute('node-index')
+      let inputField = event.currentTarget
+      let currentDateInputNodeIndex = inputField.getAttribute('node-index')
       let currentValueAsStringArray = this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.split(this[`dateInputFormatChar${currentDateInputNodeIndex}`]).filter(char => char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
+
       if (currentValueAsStringArray[0] && currentValueAsStringArray[0][0] > 3 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['day'][1]) {
         currentValueAsStringArray[0] = '0' + currentValueAsStringArray[0]
       }
+
       if (currentValueAsStringArray[1] && currentValueAsStringArray[1][0] > 1 && this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${currentDateInputNodeIndex}`]['month'][1]) {
         currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1]
       }
+
       currentValueAsStringArray = currentValueAsStringArray.filter(char => char && char !== this[`dateInputFormatChar${currentDateInputNodeIndex}`])
       this.getInputFieldByNodeIndex(currentDateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${currentDateInputNodeIndex}`])
     }
@@ -252,9 +255,8 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C
         node.errorTextWrapper = errorTextWrapper
 
         if (nodeHasLiveValidation) {
-          if (node.hasAttribute('m-date-input')) {
-            node.addEventListener('input', this.validationDateInputPatternEventListener)
-          }
+          // Keep this ranking of event-binding; it's important to trigger this function earlier than the other ones.
+          if (node.hasAttribute('m-date-input')) node.addEventListener('input', this.validationDateInputPatternEventListener)
 
           node.addEventListener('input', this.validationChangeEventListener)