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

  <goat-time-picker label="Date" helper-text="Optional helper text"></goat-time-picker>
Sizes Fancy larger or smaller input? Add size attribute for additional sizes. 

  <goat-time-picker size="lg"></goat-time-picker>
  <goat-time-picker size="md"></goat-time-picker>
  <goat-time-picker size="sm"></goat-time-picker>
Disabled Make input look inactive by adding the disabled boolean attribute to any <input> element. 

  <goat-time-picker disabled></goat-time-picker>
Read only 

  <goat-time-picker readonly></goat-time-picker>
Events On input change a CustomEvent goat:change is triggered by the element. 
 document.querySelector('#time-field').addEventListener('goat:input',
      function(event) {
        console.log('goat:input :: ' + event.target.value);
      });

      document.querySelector('#time-field').addEventListener('goat:change', function(event) {
        console.warn('goat:change :: ' + event.target.value);
      });
Usage Sizes Disabled Events
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next