Date Input

Entrada de fecha estructurada en tres campos independientes de día, mes y año.

Estado: draft

Vista Previa

Date Input Normal


Seleccionar Fecha de Inicio

Date Input Error


Seleccionar Fecha con Errores

Date Input Disabled


Seleccionar Fecha Deshabilitada

# Componente Date Input

El componente Date Input es estructuralmente un macro-componente (Patrón) diseñado para solicitar fechas atómicas al usuario mediante la composición integrada de entradas de Día, Mes y Año.

Composición Interna

No re-define controles desde cero, simplemente orquesta la llamada a componentes .gn-input libres y a un .gn-select mediante una envoltura controladora Flexbox (.gn-date-input) asegurando que los anchos concuerden quirúrgicamente con la plantilla original de diseño (92px para día, 247px para mes, 116px para año).

Accesibilidad (A11y)

Dado que conceptualmente los 3 campos refieren a una única semántica conceptual ("Una fecha de origen"), el HTML se exige englobarlo imperativamente con la etiqueta <fieldset> conteniendo su <legend class="sr-only">Seleccionar Fecha</legend>.

Estados Derivados

El Date Input propaga semánticamente los estados. Para detonar la UI roja de error global, cada hijo interno (.gn-input / .gn-select) debe recibir paramétricamente el modificador de error que le pertenece (--error). Lo mismo aplica para inhabilitar toda la cadena de entrada mediante :disabled globales aplicados.

HTML

<fieldset class="gn-date-input">
  <legend class="sr-only">Seleccionar Fecha</legend>
  
  <div class="gn-date-input__group gn-date-input__day">
    <div class="gn-input">
      <label class="gn-date-input__label" for="date-day">Día</label>
      <div class="gn-input__control">
        <input type="text" id="date-day" class="gn-input__field" placeholder="00" aria-label="Día de la fecha" />
      </div>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__month">
    <div class="gn-select">
      <label class="gn-date-input__label" for="date-month">Mes</label>
      <div class="gn-select__wrapper">
        <select id="date-month" class="gn-select__control" aria-label="Mes de la fecha">
          <option value="" disabled selected hidden>Seleccionar...</option>
          <option value="01">Enero</option>
          <option value="02">Febrero</option>
          <option value="03">Marzo</option>
          <option value="04">Abril</option>
          <option value="05">Mayo</option>
          <option value="06">Junio</option>
          <option value="07">Julio</option>
          <option value="08">Agosto</option>
          <option value="09">Septiembre</option>
          <option value="10">Octubre</option>
          <option value="11">Noviembre</option>
          <option value="12">Diciembre</option>
        </select>
      </div>
    </div>
  </div>

  <div class="gn-date-input__group gn-date-input__year">
    <div class="gn-input">
      <label class="gn-date-input__label" for="date-year">Año</label>
      <div class="gn-input__control">
        <input type="text" id="date-year" class="gn-input__field" placeholder="0000" aria-label="Año de la fecha" />
      </div>
    </div>
  </div>
</fieldset>