Calendar

<gstock-calendar> | GstockCalendar

Mostrar fecha actual

Utilice el atributo show-current-date para mostrar la fecha actual en el calendario.

<gstock-calendar show-current-date="show-current-date"></gstock-calendar>

Año mínimo y máximo

Utilice los atributos min-year y max-year para limitar el año mínimo o máximo seleccionable.

<gstock-calendar min-year="2024" max-year="2024"></gstock-calendar>

Fecha mínima y máxima

Utilice los atributos min-date y max-date para limitar la fecha mínima o máxima seleccionable.

<gstock-calendar min-date="2024-01-15" max-date="2024-12-15"></gstock-calendar>

Form Control

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>
  <gstock-calendar
    name="selected-days"
    label="Required field:"
    required
    help-text="The form will not be submitted if a required field is incomplete."></gstock-calendar>
  <br /><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('form');
  const calendar = document.querySelector('gstock-calendar');

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

Errores de validación personalizados

Para crear un error de validación personalizado, pase un string que no esté vacío al método setCustomValidity().

Esto anulará cualquier restricción de validación existente. Para que el componente vuelva a ser válido, vuelva a llamar a setCustomValidity() con un string vacío.

<form>
  <gstock-calendar
    label="Select the `2024-08-15` date to make the calendar 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-calendar>
  <br /><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('form');
  const calendar = form.querySelector('gstock-calendar');

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

    calendar.addEventListener('gstock-input-event', () => {
      if (calendar.value === '2024-08-15') {
        calendar.setCustomValidity('');
      } else {
        calendar.setCustomValidity("You must calendar '2024-08-15' before sending!");
      }
    });
  });
</script>

Estilos de validación

Utilice el atributo validity-styles para aplicar estilos de validación. Estos estilos se aplican únicamente después de una interacción del usuario.

<form>
  <gstock-calendar
    name="selected-days"
    label="Name:"
    help-text="This field is required."
    required
    validity-styles></gstock-calendar>
  <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('form');

  await Promise.all([
    customElements.whenDefined('gstock-calendar'),
    customElements.whenDefined('gstock-button'),
  ]).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>

Validación en línea

Para desactivar los mensajes de error de los navegadores, debe cancelar el evento gstock-invalid-event. Luego, puede aplicar sus propios errores de validación en línea.

<form>
  <gstock-calendar
    name="selected-days"
    label="Name:"
    help-text="This field is required."
    required
    validity-styles></gstock-calendar>
  <br />
  <div class="error" aria-live="polite" hidden="hidden"></div>
  <br /><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('form');
  const nameError = form.querySelector('.error');

  await Promise.all([
    customElements.whenDefined('gstock-calendar'),
    customElements.whenDefined('gstock-button'),
  ]).then(() => {
    form.addEventListener(
      'gstock-invalid-event',
      event => {
        event.preventDefault();
        nameError.textContent = `Error: ${event.target.validationMessage}`;
        nameError.hidden = false;
        event.target.focus();
      },
      {
        capture: true,
      },
    );

    form.addEventListener('submit', event => {
      event.preventDefault();
      nameError.hidden = true;
      nameError.textContent = '';
      setTimeout(() => {
        const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
        alert(`The field is valid!\n\n${formData}`);
      }, 50);
    });

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