Date Picker

The Date Picker component is used to capture date user input.

Usage

Here are different types of inputs.


  <wc-date-picker label="Date" helper-text="Optional helper text"></wc-date-picker>

Sizes

Fancy larger or smaller input? Add size attribute for additional sizes.


  <goat-date-picker size="lg"></goat-date-picker>
  <goat-date-picker size="md"></goat-date-picker>
  <goat-date-picker size="sm"></goat-date-picker>

Disabled

Make input look inactive by adding the disabled boolean attribute to any <input> element.


  <goat-date-picker disabled="true"></goat-date-picker>

Read only


  <goat-date-picker readonly="true"></goat-date-picker>

Events

On input change a CustomEvent goat:change is triggered by the element.


      document.querySelector('#date-field').addEventListener('goat-date-picker--input', function (event) {
      myConsole.log('goat-date-picker--input :: ' + event.target.value);
    });
      document.querySelector('#date-field').addEventListener('goat-date-picker--change', function (event) {
      myConsole.warn('goat-date-picker--change :: ' + event.target.value);
    });