<input class="input input--text" Value="" data-date-id="input-0402" data-val="true" data-val-date="Das Feld &quot;Geburtsdatum&quot; muss eine Datumsangabe sein." data-val-required="Bitte geben Sie ein gültiges Geburtsdatum ein." name="BirthDate"
placeholder="DD.MM.YYYY" required="required" type="hidden" value="01.01.0001 00:00:00" />
<input class="input js-date input--date" type="date" placeholder="DD.MM.YYYY" id="input-0402" name="input-0402" />
-
//- Prepare attr object
attr = attr || {};
attr.class = classList(attr.class);
attr.class.push(`input--${type}`);
attr.id = id || attr.id || `input-${randomString()}`;
attr.name = name || attr.name || attr.id;
//- Render atom
input.input.input--text(Value='', data-date-id=attr.id, data-val='true', data-val-date='Das Feld "Geburtsdatum" muss eine Datumsangabe sein.', data-val-required='Bitte geben Sie ein gültiges Geburtsdatum ein.', name='BirthDate', placeholder='DD.MM.YYYY', required='required', type='hidden', value='01.01.0001 00:00:00')
input.input.js-date(type=type, value=value, placeholder=placeholder, required=required)&attributes(attr)
{
"type": "date",
"placeholder": "DD.MM.YYYY"
}
const GERMAN_DATE_FORMAT = /\d{2}(\.)\d{2}(\.)\d{4}/;
const ISO_DATE_FORMAT = /\d{4}(-)\d{2}(-)\d{2}/;
export default class InputDate {
constructor($el) {
this.$el = $el;
this.$formInput = document.querySelector(`[data-date-id=${this.$el.id}]`);
this.init();
}
init() {
this.$el.addEventListener('input', () => {
this.processInput(this.$el.value);
});
}
processInput(value) {
if (GERMAN_DATE_FORMAT.test(value)) {
this.$formInput.value = value.split('.').reverse().join('-');
this.$el.removeAttribute('aria-invalid');
} else if (ISO_DATE_FORMAT.test(value)) {
this.$formInput.value = value;
this.$el.removeAttribute('aria-invalid');
} else {
this.$formInput.value = '';
this.$el.setAttribute('aria-invalid', 'true');
}
}
}
// Initialize date
document
.querySelectorAll('.js-date')
.forEach($el => new InputDate($el));
There are no notes for this item.