diff --git a/src/es/components/molecules/simpleForm/default-/formValidation.html b/src/es/components/molecules/simpleForm/default-/formValidation.html index 833288168..8ab15f9b4 100644 --- a/src/es/components/molecules/simpleForm/default-/formValidation.html +++ b/src/es/components/molecules/simpleForm/default-/formValidation.html @@ -29,6 +29,33 @@ "max-length": {"value": "10", "error-message": "Bitte maximum 10 Character eingeben."} }' type="text" value="" name="Name" placeholder="Name hier eingeben..." autocomplete="off" /> +
+ + +
+
+ + +
+
+ + +
char === this[`dateInputFormatChar${dateInputNodeIndex}`]).length + let dateInputOldFormatCharLength = this[`oldDateInputValue${dateInputNodeIndex}`]?.split('').filter(char => char === this[`dateInputFormatChar${dateInputNodeIndex}`]).length + + 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${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${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')) { + 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(dateInputNodeIndex).value.length - 1 < this[`dateInputFormIndexes${dateInputNodeIndex}`]['month'][1]) { + currentValueAsStringArray[1] = '0' + currentValueAsStringArray[1] + this[`dateInputFormatChar${dateInputNodeIndex}`] + } + this.getInputFieldByNodeIndex(dateInputNodeIndex).value = currentValueAsStringArray.join(this[`dateInputFormatChar${dateInputNodeIndex}`]) + } this.validator(this.validationValues[inputFieldName], inputField, inputFieldName) if (this.realTimeSubmitButton) { this.checkIfFormValid() } } + this.dateInputFormatterEventListener = (event) => { + 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}`]) + } + + 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'] @@ -40,6 +102,42 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C } } + 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[`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) + } + + // if remove + 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[`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[`currentDateInput${currentDateInputIndex}`] === this[`dateInputFormatChar${currentDateInputIndex}`]) { + if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'd') { + this.formatDateInput(currentDateInputIndex, 'day') + } + else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'm') { + this.formatDateInput(currentDateInputIndex, 'month') + } + else if (this[`dateFormat${currentDateInputIndex}`][this[`currentDateInputSelectionStart${currentDateInputIndex}`] - 1] === 'y') { + this.formatDateInput(currentDateInputIndex, 'year') + } + } + } + this.applyMask = (value, maskPattern, isBackspace, cursorPosition) => { let result = '' let valueIndex = 0 @@ -132,7 +230,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 +239,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' @@ -157,9 +255,19 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C node.errorTextWrapper = errorTextWrapper if (nodeHasLiveValidation) { + // 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) + + 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 @@ -170,11 +278,31 @@ 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('m-date-input')) node.addEventListener('input', this.validationDateInputPatternEventListener) + else node.addEventListener('input', this.validationPatternInputEventListener) } }) } } + if (node.hasAttribute('m-date-input') && !node.hasAttribute('node-index')) { + node.setAttribute('node-index', index) + this[`dateFormat${index}`] = this.validationValues[node.getAttribute('name')].pattern['mask-value'] ?? 'dd/mm/yyyy' + + 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[`dateInputFormIndexes${index}`] = { + formatChar: Array(), + day: Array(), + month: Array(), + year: Array() + } + this.setDateInputFormIndexes(index) + + node.setAttribute('maxlength', `${this[`dateFormat${index}`].length}`) + node.addEventListener('keydown', this.setDateInputAllowedKeys) + } }) } @@ -215,7 +343,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 +367,10 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C }) } } + if (node.hasAttribute('m-date-input')) { + node.removeEventListener('keydown', this.setDateInputAllowedKeys) + node.removeEventListener('input', this.validationDateInputPatternEventListener) + } }) } if (this.submitButton) { @@ -246,7 +378,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') { @@ -301,7 +433,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['day']) { const maskValue = validationRules.pattern['mask-value'] let currentInputValue = currentInput.value @@ -310,6 +442,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['day']) { + 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) } @@ -322,28 +459,48 @@ 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 === 'day') { + const currentFieldIndex = currentInput.getAttribute('node-index') + const isDayValidationValid = this.customDateInputValidator('day', +validationRules['day'].min, +validationRules['day'].max, currentFieldIndex) + this.setValidity(inputFieldName, validationName, isDayValidationValid) + } + if (validationName === 'month') { + const currentFieldIndex = currentInput.getAttribute('node-index') + const isMonthValidationValid = this.customDateInputValidator('month', +validationRules['month'].min, +validationRules['month'].max, currentFieldIndex) + this.setValidity(inputFieldName, validationName, isMonthValidationValid) + } + if (validationName === 'year') { + const currentFieldIndex = currentInput.getAttribute('node-index') + const isYearValidationValid = this.customDateInputValidator('year', +validationRules['year'].min, +validationRules['year'].max, currentFieldIndex) + this.setValidity(inputFieldName, validationName, isYearValidationValid) + } }) } - 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' 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) @@ -386,7 +543,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 +571,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 +592,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 +619,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 +640,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 +649,140 @@ export const Validation = (ChosenClass = Shadow()) => class Validation extends C } return el } + + setDateInputAllowedKeys = (event) => { + const currentDateInputIndex = event.currentTarget.getAttribute('node-index') + const keyCode = event.which + if (event.key == this[`dateInputFormatChar${currentDateInputIndex}`]) { } + 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 + } + } + + 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) + }) + } + + 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[`dateFormat${index}`][this[`currentDateInputValueLength${index}`] + 1] === this[`dateInputFormatChar${index}`]) { + this.getInputFieldByNodeIndex(index).value = this.getInputFieldByNodeIndex(index).value + this[`dateInputFormatChar${index}`] + } + } + + getInputFieldByNodeIndex(nodeIndex) { + if (this.root.querySelector(`input[node-index="${nodeIndex}"]`)) return this.root.querySelector(`input[node-index="${nodeIndex}"]`) + } + + formatDateInput(index, dateType) { + 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[`currentDateInputValue${index}`][ind] === this[`dateInputFormatChar${index}`] || !this[`currentDateInputValue${index}`][ind]) { + currentDateTypeValue.unshift('0') + } else { + currentDateTypeValue.unshift(this[`currentDateInputValue${index}`][ind]) + } + }) + let inputFieldValue = this[`currentDateInputValue${index}`].split('') + this[`dateInputFormIndexes${index}`][dateType].forEach((ind, i) => { + inputFieldValue[ind] = currentDateTypeValue[i] + }) + this.getInputFieldByNodeIndex(index).value = inputFieldValue.join('') + this.checkDateInputNextChar(index, true) + } + } + }) + } + + customDateInputValidator(type, min, max, index) { + 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 + } + + customMainDateFormatValidator(index) { + let mainValidation = true + this[`dateInputFormIndexes${index}`].formatChar.forEach(ind => { + if (this.getInputFieldByNodeIndex(index).value[ind] !== this[`dateInputFormatChar${index}`]) mainValidation = false + }) + if (this.getInputFieldByNodeIndex(index).value.length !== this[`dateFormat${index}`].length) mainValidation = false + return mainValidation + } + + 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[`dateInputFormIndexes${index}`][dateType].length) { + let currentFormatCharIndexes = [] + this.getInputFieldByNodeIndex(index).value.split('').forEach((char, index2) => { + char === this[`dateInputFormatChar${index}`] ? currentFormatCharIndexes.push(index2) : '' + }) + + let lengthDiff = this[`dateInputFormIndexes${index}`][dateType].length - newCurrentDateUnit.length + for (let i = 0; i < lengthDiff; i++) { + 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[`dateInputFormatChar${index}`]) { + newCurrentDateUnit = ['0', '1', this[`dateInputFormatChar${index}`]] + } else { + 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[`dateInputFormIndexes${index}`][dateType][0]) + newCurrentDateUnit.join('') + this.getInputFieldByNodeIndex(index).value.slice(this[`dateInputFormIndexes${index}`][dateType][this[`dateInputFormIndexes${index}`][dateType].length - 1]) + + 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[`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}`] + } + } + + 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 + } }