<input class="input js-data-date input--date" type="date" placeholder="DD.MM.YYYY" id="input-6488" name="input-6488" />
-
//- 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.js-data-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 InputDataDate {
constructor($el) {
this.$el = $el;
this.init();
}
init() {
this.$el.addEventListener('input', () => {
this.processInput(this.$el.value);
});
}
processInput(value) {
if (GERMAN_DATE_FORMAT.test(value)) {
this.$el.setAttribute('data-value', value.split('.').reverse().join('-'));
this.$el.removeAttribute('aria-invalid');
} else if (ISO_DATE_FORMAT.test(value)) {
this.$el.setAttribute('data-value', value);
this.$el.removeAttribute('aria-invalid');
} else {
this.$el.setAttribute('data-value', '');
this.$el.setAttribute('aria-invalid', 'true');
}
}
}
// Initialize data date
document
.querySelectorAll('.js-data-date')
.forEach($el => new InputDataDate($el));
There are no notes for this item.