England Football

Registration Date Input 

<div class="registration-text-input-container registration-date-input-container">
    <label class="registration-text-input-container__label" for=primary>
        Input field
    </label>
    <input class="registration-text-input-container__text-input" type="text" name="primary" id="primary" placeholder="ESTC input field" />
    <input type="date" class="hidden-date-input" />
    <i class="calendar-icon"></i>
    <div class="registration-error registration_hide" role="alert">
        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
    </div>

</div>

No notes defined.

{
  "modifier": "primary",
  "id": "primary",
  "name": "primary",
  "ariaLabel": "Input field",
  "type": "text",
  "placeholder": "ESTC input field",
  "label": "Input field"
}
  • Content: 
    export default currentElement => {
  const [hideenDateInput, calenderIcon] = currentElement.querySelectorAll(
    '.hidden-date-input, .calendar-icon'
  );

  calenderIcon.addEventListener('click', () => {
    hideenDateInput.showPicker();
  });
};
  • URL: /components/raw/registration-date-input/registration-date-input.js
  • Filesystem Path: src/library/modules/registration/registration-date-input/registration-date-input.js
  • Size: 249 Bytes
  • Content: 
    .registration-date-input-container {
  position: relative;
  .hidden-date-input {
    height: 0;
    width: 100%;
    color: red;
    position: absolute;
    display: block;
    border: 0;
  }

  .calendar-icon {
    position: absolute;
    content: url('./assets/example-content/calender-icon.svg');
    right: 1rem;
    transform: translate(-44%, 25%);
    top: 22px;
    z-index: 2;
  }
}
  • URL: /components/raw/registration-date-input/registration-date-input.scss
  • Filesystem Path: src/library/modules/registration/registration-date-input/registration-date-input.scss
  • Size: 412 Bytes 
<div class="registration-text-input-container registration-date-input-container">
    {{!-- add error class to make error visible --}}
    <label class="registration-text-input-container__label" {{#if name }}for={{name}} {{/if}}>
        {{label }}
    </label>
    <input class="registration-text-input-container__text-input" type="text" {{#if disabled}}disabled{{/if}} {{#if
        max}}max='{{max}}' {{/if}} {{#if name}}name="{{name}}" {{/if}} {{#if id}} id="{{id}}" {{/if}} {{#if
        autocomplete}}autocomplete="{{autocomplete}}" {{/if}} {{#if placeholder}} placeholder="{{placeholder}}" {{/if}}
        {{#if aria-label}} aria-label="{{ariaLabel}}" {{/if}} />
    <input type="date" class="hidden-date-input" />
    <i class="calendar-icon"></i>
    {{render '@registration-error'}}
</div>