Time Picker

The Time Picker component is used to capture time user input.

Usage

Here are different types of inputs.


  <wc-time-picker label="Time" helper-text="Optional helper text"></wc-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="true"></goat-time-picker>

Read only


  <goat-time-picker readonly="true"></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);
      });