hkk Frontend 2017

Eingabefeld (Datum - Interaktiv) 

<input class="input js-data-date input--date" type="date" placeholder="DD.MM.YYYY" id="input-1e11" name="input-1e11" />
 
-
  //- 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.