<input class="input input--text" Value="" data-date-id="input-feb7" data-val="true" data-val-date="Das Feld &amp;quot;Geburtsdatum&amp;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-feb7" name="input-feb7" />
-
  //- 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 &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.input.js-date(type=type, value=value, placeholder=placeholder, required=required)&attributes(attr)
{
  "type": "date",
  "placeholder": "DD.MM.YYYY"
}
  • Content:
    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));
    
  • URL: /components/raw/input-date/input-date.js
  • Filesystem Path: src/components/atoms/input-date/input-date.js
  • Size: 917 Bytes

There are no notes for this item.