<input class="input js-data-date input--date" type="date" placeholder="DD.MM.YYYY" id="input-d021" name="input-d021" />
-
  //- 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"
}
  • Content:
    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));
    
  • URL: /components/raw/input-data-date/input-data-date.js
  • Filesystem Path: src/components/atoms/input-data-date/input-data-date.js
  • Size: 895 Bytes
  • Handle: @input-data-date
  • Preview:
  • Filesystem Path: src/components/atoms/input-data-date/input-data-date.pug

There are no notes for this item.