Home Components Date Picker
Date Picker
Overview Playground API
Captures date input.
Usage Here are different types of inputs. 

  <goat-date-picker label="Date" helper-text="Optional helper text"></goat-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></goat-date-picker>
Read only 

  <goat-date-picker readonly></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);
    });
Usage Sizes Disabled Events
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next