<!-- INICIO: Seleccionar una fecha -->
<section id="datepicker-basico" class="panel demo-card" data-component="datepicker-basico">
  <div class="panel-heading"><h2>Seleccionar una fecha</h2></div>
  <div class="demo-grid two">
    <label class="demo-label-block"
      >Fecha del movimiento<input
        id="date-single"
        class="demo-input"
        type="date"
        value="2026-10-28"
    /></label>
    <div class="demo-summary">
      <span>Fecha seleccionada</span
      ><output id="single-date-result" aria-live="polite">28 de octubre de 2026</output>
    </div>
  </div>
</section>
<!-- FIN: Seleccionar una fecha -->

<!-- INICIO: Rango de fechas y hora -->
<section id="datepicker-rango" class="panel demo-card" data-component="datepicker-rango">
  <div class="panel-heading"><h2>Rango de fechas y hora</h2></div>
  <div class="demo-grid two">
    <label class="demo-label-block"
      >Período del reporte<input
        id="date-range"
        class="demo-input"
        placeholder="Elige inicio y fin" /></label
    ><label class="demo-label-block"
      >Hora del recordatorio<input id="date-time" class="demo-input" type="time" value="09:00"
    /></label>
  </div>
  <output id="date-range-result" class="demo-inline-output" aria-live="polite"
    >Elige dos fechas para consultar el período.</output
  >
</section>
<!-- FIN: Rango de fechas y hora -->