DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Calendario

Formularios

Campo que permite desplegar un calendario para seleccionar una fecha o rango de fechas. Basado en la librería Cally

Datepicker

Standalone fecha única

Usa el parámetro standalone: true para mostrar solo el calendario sin el input. Usa la documentación de la librería Cally para añadir el calendario como un caller de este componente.

Descripción visual

Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando "[object Object]" en fuente monoespaciada.
Mostrar códigodel ejemplo: Standalone fecha única

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-date",
  "standalone": true
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Standalone fecha única y selector de año

Usa el parámetro standalone: true para mostrar solo el calendario sin el input. Usa la documentación de la librería Cally para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot 'header' del calendario de Cally para añadirle un componente Select como selector de año.

Descripción visual

Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando "[object Object]" en fuente monoespaciada.
Mostrar códigodel ejemplo: Standalone fecha única y selector de año

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-years",
  "standalone": true
}) %}
<calendar-date
    value="01-10-2025"
    min="01-01-2025"
    max="12-31-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

      <div slot="heading" class="order-first w-full flex justify-center">
    <!-- select -->
<div class="c-form-group -mb-12">
  <!-- label -->
  <label class="block max-w-40 text-sm" for="select-years-datepicker-years">Selecciona un año para cargar sus datos</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded-sm font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="select-years-datepicker-years" name="select-years-datepicker-years">
    <option value="2024" selected>2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</div>
<!-- /select -->
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Standalone fechas múltiples

Usa el parámetro standalone: true para mostrar solo el calendario sin el input. Usa la documentación de la librería Cally para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <calendar-multi> de Cally para se puedan seleccionar múltiples fechas.

Descripción visual

Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando "[object Object]" en fuente monoespaciada.
Mostrar códigodel ejemplo: Standalone fechas múltiples

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-multi",
  "standalone": true
}) %}
<calendar-multi
    value="10-01-2024 20-01-2025"
    min="01-01-2025"
    max="31-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-multi>
{% endcall  %}

Standalone rango de fechas

Usa el parámetro standalone: true para mostrar solo el calendario sin el input. Usa la documentación de la librería Cally para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <calendar-range> de Cally para que tenga un selector de rangos de fecha.

Descripción visual

Sección rectangular con borde gris claro de 1px y fondo blanco. Contiene un encabezado de texto negro en tamaño pequeño, seguido de texto gris "[object Object]" en fuente monoespaciada. Altura compacta con padding interno moderado.
Mostrar códigodel ejemplo: Standalone rango de fechas

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-range",
  "standalone": true
}) %}
<calendar-range
    value="10-01-2024/20-01-2025"
    min="01-01-2025"
    max="21-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-range>
{% endcall  %}

Standalone rango de fechas 2 meses y selector de año

Usa el parámetro standalone: true para mostrar solo el calendario sin el input. Usa la documentación de la librería Cally para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <calendar-range months='2'> y <calendar-month offset='1'> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.

Descripción visual

Sección rectangular con borde gris claro de 1px y fondo blanco. Incluye un encabezado de texto negro en tamaño pequeño en dos líneas, seguido de texto gris "[object Object]" en fuente monoespaciada. Altura compacta con padding interno moderado.
Mostrar códigodel ejemplo: Standalone rango de fechas 2 meses y selector de año

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-range2",
  "standalone": true
}) %}
<calendar-range
    months="2"
    value="01-01-2025/16-01-2025"
    min="01-01-2025"
    max="31-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

      <div slot="heading" class="order-first w-full flex justify-center">
    <!-- select -->
<div class="c-form-group -mb-12">
  <!-- label -->
  <label class="block max-w-40 text-sm" for="select-years-datepicker-range2">Selecciona un año para cargar sus datos</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded-sm font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="select-years-datepicker-range2" name="select-years-datepicker-range2">
    <option value="2024" selected>2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</div>
<!-- /select -->
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
      <calendar-month offset="1"></calendar-month>
    </div>
  </calendar-range>
{% endcall  %}

Por defecto

Descripción visual

Sección rectangular con borde gris claro de 1px y fondo blanco. Encabezado de texto negro en negrita tamaño pequeño, seguido de dos líneas de texto gris normal como instrucciones. Campo de entrada blanco rectangular con borde gris claro de 1px y un icono azul con fondo azul claro alineado a la derecha dentro del campo.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-default",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
  }
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Fechas múltiples

Descripción visual

Campo de texto con borde gris claro de 1px y esquinas redondeadas, fondo blanco, texto negro en formato de fecha. Título en negrita negro arriba, seguido de texto descriptivo gris oscuro en tamaño menor. Ícono de calendario azul alineado a la derecha dentro del campo, con desplegable indicado por flecha pequeña.

Para incluir las fechas en el campo de texto usa el formato de fecha día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos. Separa las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar.
Mostrar códigodel ejemplo: Fechas múltiples

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-multiple-dates",
  "name": "test-name",
  "label": {
    "text": "Elige tus días disponibles"
  },
  "hint": {
    "html": "Para incluir las fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar."
  },
  "value": "10-01-2024 20-01-2024"
}) %}
<calendar-multi
    value="10-01-2024 20-01-2025"
    min="01-01-2025"
    max="31-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-multi>
{% endcall  %}

Rango de fechas

Descripción visual

Campo de texto rectangular con borde gris claro de 1px, fondo blanco, mostrando texto negro en formato de rango de fechas separado por guión. Encabezado en negrita negro, debajo texto explicativo gris oscuro de dos líneas en tamaño reducido. Ícono de calendario azul posicionado en el extremo derecho del campo con indicador de expansión.

Para incluir el rango de fechas en el campo de texto usa el formato de fecha día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos. Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo.
Mostrar códigodel ejemplo: Rango de fechas

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-range3",
  "name": "test-name",
  "label": {
    "text": "Elige tu rango de días disponibles"
  },
  "hint": {
    "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
  },
  "value": "10-01-2024/20-01-2024"
}) %}
<calendar-range
    value="10-01-2024/20-01-2025"
    min="01-01-2025"
    max="21-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-range>
{% endcall  %}

Rango de fechas 2 meses y selector de año

Descripción visual

Input rectangular con borde gris claro de 1px y fondo blanco, conteniendo texto negro de formato de rango. Título en negrita negro en la parte superior, texto instructivo gris oscuro de dos líneas debajo del título. Ícono de calendario azul ubicado en el borde derecho del campo con flecha desplegable adyacente.

Para incluir el rango de fechas en el campo de texto usa el formato de fecha día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos. Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo.
Mostrar códigodel ejemplo: Rango de fechas 2 meses y selector de año

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-hint-text-and-year",
  "name": "test-name",
  "label": {
    "text": "Elige tu rango de días disponibles"
  },
  "hint": {
    "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
  },
  "value": "16-01-2024/04-02-2024"
}) %}
<calendar-range
    months="2"
    value="01-01-2025/16-01-2025"
    min="01-01-2025"
    max="31-12-2025"
    locale="es"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

      <div slot="heading" class="order-first w-full flex justify-center">
    <!-- select -->
<div class="c-form-group -mb-12">
  <!-- label -->
  <label class="block max-w-40 text-sm" for="select-years-datepicker-with-hint-text-and-year">Selecciona un año para cargar sus datos</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded-sm font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="select-years-datepicker-with-hint-text-and-year" name="select-years-datepicker-with-hint-text-and-year">
    <option value="2024" selected>2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</div>
<!-- /select -->
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
      <calendar-month offset="1"></calendar-month>
    </div>
  </calendar-range>
{% endcall  %}

Deshabilitado

Descripción visual

Campo de entrada de fecha con fondo gris muy claro (#f5f5f5), borde gris claro de 1px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo indicando formato. Ícono de calendario azul con cursor "not-allowed" alineado a la derecha dentro del input.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.
Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-disabled",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
  },
  "disabled": true,
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Con mensaje de error

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Descripción visual

Campo de entrada de fecha con fondo blanco, borde rojo de 2px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo del label, mensaje de error en texto rojo debajo del campo. Ícono de calendario azul alineado a la derecha dentro del input con borde rojo visible alrededor.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-error-message",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "mt-xs"
  },
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Peque

Descripción visual

Campo de entrada de fecha con fondo blanco, borde gris claro de 1px, esquinas redondeadas, altura reducida. Label negro en peso normal encima del campo, texto de ayuda gris medio entre paréntesis debajo del label. Ícono de calendario azul de tamaño pequeño alineado a la derecha dentro del input compacto.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.
Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-small",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio",
    "classes": "text-sm"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
    "classes": "text-sm"
  },
  "classes": "c-input--sm",
  "dropdownClasses": "c-dropdown--sm c-dropdown--transparent",
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Botón personalizado

Añade parámetros del componente Botón para sustituir el icono del calendario con un botón junto al input.

Descripción visual

Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando "Elige fecha de inicio", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón "Seleccionar fecha" con texto azul y borde azul alineado a la derecha del campo.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.
Mostrar códigodel ejemplo: Botón personalizado

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-personalized-button",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
  },
  "dropdown": {
    "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>"
  },
  "classes": "flex-1",
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}

Botón personalizado pequeño

Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.

Descripción visual

Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando "Elige fecha de inicio", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón "Seleccionar fecha" con texto azul y borde azul de dimensiones reducidas alineado a la derecha del campo.

Usa el formato: día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.
Mostrar códigodel ejemplo: Botón personalizado pequeño

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-button-small",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio",
    "classes": "text-sm"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
    "classes": "text-sm"
  },
  "dropdown": {
    "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
    "classes": "c-dropdown--sm"
  },
  "classes": "flex-1 c-input--sm",
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2025"
    max="01-01-2026"
    locale="es"
    format="DD-MM-YYYY"
  >
      <div slot="previous">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
  </div>

      <div slot="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
  </div>

    <div class="flex flex-wrap justify-center gap-lg">
      <calendar-month></calendar-month>
    </div>
  </calendar-date>
{% endcall  %}