Time Picker

<gstock-time-picker> | GstockTimePicker

<gstock-time-picker show-seconds></gstock-time-picker>

Sizes

Use the size attribute too change size of the time picker


<gstock-time-picker size="small"></gstock-time-picker>

<gstock-time-picker size="medium"></gstock-time-picker>

<gstock-time-picker size="large"></gstock-time-picker>

Placeholder

Use the placeholder attribute to add a placeholder on the different inputs.
The proper way to use this placeholder is having this format HH:mm or HH:mm:ss and setting : in order to separate the individual placeholder inputs.

<gstock-time-picker placeholder="HH:mm:ss" show-seconds></gstock-time-picker>

Disabled

Use the disabled attribute to disable the whole input.

<gstock-time-picker disabled></gstock-time-picker>

Readonly

Use the readonly attribute to disable the whole input.

<gstock-time-picker readonly></gstock-time-picker>

Label and help text

Use the label and help-text attribute to give the select more accessible.

<gstock-time-picker label='My time picker' help-text="This is a help text for my time picker"></gstock-time-picker>

Clearable

Use the clearable attribute to add a clear button when the inputs have content.

<gstock-time-picker clearable></gstock-time-picker>

Suffix

Use the suffix attribute to add icon.

<gstock-time-picker suffix="clock"></gstock-time-picker>

Control de formulario

Este componente funciona con elementos estándar <form>. Consulta la sección sobre controles de formulario para obtener más información sobre el envío de formularios y la validación del lado del cliente.

Campo obligatorio

Utilice el atributo required para que el valor del componente sea obligatorio.

<form class="time-picker-validation-required">
  <gstock-time-picker required></gstock-time-picker>
    <br />
    <gstock-button size="small" type="submit">Submit</gstock-button>
</form>
<script type="module">
    const form = document.querySelector('.time-picker-validation-required');
    const datePicker = form.querySelector('gstock-time-picker');
    form.addEventListener('submit', event => {
      event.preventDefault();
      if(datePicker.validity.valid){
        alert('The field is valid!');
      }
    });
</script>

Custom error messages

To create a custom validation error, pass a non-empty string to the setCustomValidity() method. This will override any existing validation constraints. To make the input valid again, call setCustomValidity() again with an empty string.

<form class="time-picker-validation-custom">
  <gstock-time-picker label="Type `22:22` to make the hours input valid:"
    required
    help-text="The form will not be submitted when a custom validity is set and the browser will show a
    validation error when the containing form is submitted."></gstock-time-picker>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.time-picker-validation-custom');
  const datePicker = form.querySelector('gstock-time-picker')

    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      if (datePicker.value === '22:22') {
        alert(`The field is valid!\n\n${formData}`);
      }
    });
    datePicker.addEventListener('gstock-input-event', () => {
      if (datePicker.value !== '22:22') {
        datePicker.setCustomValidity("You must type '22:22' before sending!");
      } else {
        datePicker.setCustomValidity('');
        alert('The field is valid!');
      }
    });
</script>

Styling validation

Use the validity-styles attribute to apply validation styles. These styles are applied only after a user interaction, such as typing or submitting.

<form class="validity-styles">

  <gstock-time-picker
    label="Hours:"
    help-text="This field is required."
    required
    validity-styles></gstock-time-picker>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.validity-styles');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-time-picker'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Inline validation

To disable the browsers error messages, you need to cancel the gstock-invalid-event event. Then you can apply your own inline validation errors.

<form class="inline-validation">

  <gstock-time-picker
    label="Name:"
    help-text="This field is required."
    required
    validity-styles></gstock-time-picker>
  <br />
  <div id="error-message" aria-live="polite" hidden></div>
  <br />
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  const form = document.querySelector('.inline-validation');
  const errorMessage = document.querySelector('#error-message');

    form.addEventListener(
      'gstock-invalid-event',
      event => {
        event.preventDefault();
        errorMessage.textContent = `Error: ${event.target.validationMessage}`;
        errorMessage.hidden = false;
        event.target.focus();
      },
      { capture: true },
    );

    form.addEventListener('submit', event => {
      event.preventDefault();
      errorMessage.hidden = true;
      errorMessage.textContent = '';

      setTimeout(() => {
        const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
        alert(`The field is valid!\n\n${formData}`);
      }, 50);
    });

    form.addEventListener('reset', () => {
      errorMessage.hidden = true;
      errorMessage.textContent = '';
    });
</script>