Date Picker

<gstock-date-picker> | GstockDatePicker

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

<gstock-date-picker size="small"></gstock-date-picker>
<gstock-date-picker size="medium"></gstock-date-picker>
<gstock-date-picker size="large"></gstock-date-picker>

Marcador de posición

Utilice el atributo placeholder para agregar un marcador de posición.

<gstock-date-picker placeholder="yyyy-mm-dd"></gstock-date-picker>

Deshabilitado

Utilice el atributo disabled para deshabilitar el componente.

<gstock-date-picker disabled value="2024-12-31"></gstock-date-picker>

Solo lectura

Utilice el atributo readonly para permitir leer el valor y no modificarlo.

<gstock-date-picker readonly value="2024-12-31"></gstock-date-picker>

Date format

Use the date-format attribute to change the format of the date. By the default, the date format is YYYY-MM-DD and the this attribute accepts the following formats:

DD/MM/YYYY

DD-MM-YYYY

DD.MM.YYYY

YYYY/MM/DD

YYYY-MM-DD

YYYY.MM.DD

MM/DD/YYYY

MM-DD-YYYY

MM.DD.YYYY

<gstock-date-picker clearable label="Select a date" date-format="DD/MM/YYYY"></gstock-date-picker>

<div class="playground-controls">
  <gstock-select size="small" label="Date format" value="DD/MM/YYYY">
    <gstock-option value="DD/MM/YYYY">DD/MM/YYYY</gstock-option>
    <gstock-option value="DD-MM-YYYY">DD-MM-YYYY</gstock-option>
    <gstock-option value="DD.MM.YYYY">DD.MM.YYYY</gstock-option>
    <gstock-option value="YYYY/MM/DD">YYYY/MM/DD</gstock-option>
    <gstock-option value="YYYY-MM-DD">YYYY-MM-DD</gstock-option>
    <gstock-option value="YYYY.MM.DD">YYYY.MM.DD</gstock-option>
    <gstock-option value="MM/DD/YYYY">MM/DD/YYYY</gstock-option>
    <gstock-option value="MM-DD-YYYY">MM-DD-YYYY</gstock-option>
    <gstock-option value="MM.DD.YYYY">MM.DD.YYYY</gstock-option>
  </gstock-select>

  <script type="module">
    const datePicker = document.querySelector('gstock-date-picker');
    const dateFormatSelect = document.querySelector('gstock-select');

    await Promise.all([customElements.whenDefined('gstock-date-picker')]).then(() => {
      dateFormatSelect.addEventListener(
        'gstock-change-event',
        (event) => {
          datePicker.setAttribute("date-format", event.target.value);
        },
      );
    });
  </script>

  <style>
    .playground-controls gstock-button,
    .playground-controls gstock-select {
      margin-bottom: 1rem;
      max-width: 300px;
    }
  </style>
</div>

Show current date

Use the show-current-date attribute to highlight current date. By default the current date will be highlighted, for disabled this mark set the attribute to false.

<gstock-date-picker show-current-date="false"></gstock-date-picker>

Maximum date

Use the max attribute to limit a maximum date that is selectable.

<gstock-date-picker max="2024-12-31"></gstock-date-picker>

Minimum date

Use the min attribute to limit a maximum date that is selectable.

<gstock-date-picker min="2024-08-15"></gstock-date-picker>

Start day of week

Use the start-day-week attribute to change the day the week starts.

<gstock-date-picker start-day-week="2"></gstock-date-picker>

Label and help text

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

<gstock-date-picker label="Label" help-text="This is a test help-text."></gstock-date-picker>

For custom labels and help texts with HTML, use the label and help-text slots.

Custom label Custom help-text with a link.

<gstock-date-picker>
  <label slot="label" style="display: inline-flex; gap: 4px">
    <gstock-icon name="edit"></gstock-icon> Custom label
  </label>
  <span slot="help-text"> Custom help-text with a <a href="#label-and-help-text">link</a>. </span>
</gstock-date-picker>

Clearable

Use the clearable attribute to add a clear button when the input has content.

<gstock-date-picker clearable value="2024-12-25"></gstock-date-picker>

Events

Change

Use the gstock-change-event event to observe when the value was changed. To emit this event select a date from the calendar picker.

Value:
Display Label:

<gstock-date-picker label="Change Event" date-format="YYYY/MM/DD"></gstock-date-picker>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const datePicker = document.querySelector('gstock-date-picker');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-date-picker')]).then(() => {
    value.innerText = datePicker.value;
    displayLabel.innerText = datePicker.displayLabel;

    datePicker.addEventListener('gstock-change-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

Clear

Use the gstock-clear-event event to observe when the value was cleared. To emit this event enable the clearable attribute and press the clear button when the value is not empty.

Value:
Display Label:

<gstock-date-picker clearable label="Clear Event" date-format="YYYY/MM/DD" value="2024-12-31"></gstock-date-picker>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const datePicker = document.querySelector('gstock-date-picker');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-date-picker')]).then(() => {
    value.innerText = datePicker.value;
    displayLabel.innerText = datePicker.displayLabel;

    datePicker.addEventListener('gstock-clear-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });

    datePicker.addEventListener('gstock-change-event', event => {
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

Input

Use the gstock-input-event event to observe when the value was inputted. To emit this event select a date from the calendar picker.

Value:
Display Label:

<gstock-date-picker label="Input Event" date-format="YYYY/MM/DD"></gstock-date-picker>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const datePicker = document.querySelector('gstock-date-picker');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-date-picker')]).then(() => {
    value.innerText = datePicker.value;
    displayLabel.innerText = datePicker.displayLabel;

    datePicker.addEventListener('gstock-input-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

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="input-validation-required">
  <gstock-date-picker
    help-text="This field is required."
    label="Select a date"
    name="date"
    required></gstock-date-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('.input-validation-required');

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

Invalid date

<form class="input-validation-invalid-date">
  <gstock-date-picker
    help-text="Show a validation error message when the value is invalid."
    label="Select a date"
    name="date"
    required
    value="INV@LID-DATE"></gstock-date-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('.input-validation-invalid-date');
  const datePicker = form.querySelector('gstock-date-picker');

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

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 date-picker valid again, call setCustomValidity() again with an empty string.

<form class="date-picker-validation-custom">
  <gstock-date-picker
    label="Select a date"
    name="date"
    required>
      <label slot="help-text">Select the <code>2024-12-31</code> date to make the date-picker valid.</label>
    </gstock-date-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('.date-picker-validation-custom');
  const datePicker = form.querySelector('gstock-date-picker');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-date-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}`);
    });

    datePicker.addEventListener('gstock-input-event', () => {
      if (datePicker.value === '2024-12-31') {
        datePicker.setCustomValidity('');
      } else {
        datePicker.setCustomValidity("You must select '2024-12-31' date before sending!");
      }
    });
  });
</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-date-picker
    help-text="This field is required."
    label="Select a date"
    name="date"
    required
    validity-styles></gstock-date-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-date-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-date-picker
    help-text="This field is required."
    label="Select a date"
    name="date"
    required
    validity-styles></gstock-date-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');

  await Promise.all([
    customElements.whenDefined('gstock-button'),
    customElements.whenDefined('gstock-date-picker'),
  ]).then(() => {
    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>