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

Mostrar parámetros

Parámetros del componente

              params:
- name: containerClasses
  type: string
  required: false
  description: Classes for the container.
- name: containerAttributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the container element.
- name: standalone
  type: boolean
  required: false
  description: If `true` the datepicker only shows the months and navigation without the input. Defaults to `false.
- name: id
  type: string
  required: true
  description: The id of the input.
- name: name
  type: string
  required: true
  description: The name of the input, which is submitted with the form data.
- name: type
  type: string
  required: false
  description: Type of input control to render. Defaults to "text".
- name: inputmode
  type: string
  require: false
  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
- name: value
  type: string
  required: false
  description: Optional initial value of the input.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: errorId
  type: string
  required: false
  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the input.
- name: autocomplete
  type: string
  required: false
  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
- name: pattern
  type: string
  required: false
  description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, input will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the anchor tag.
- name: dropdown
  type: component
  required: false
  description: dropdown component parameters. If there are any, the datepicker will show a dropdown after the input instead of the calendar icon.
- name: dropdownClasses
  type: string
  required: false
  description: Classes to add to the dropdown.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

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.
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="2024-01-01"
    max="2024-12-31"
    locale="es-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-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.
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="2024-01-10"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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 text-sm" for="select-years-datepicker-years">Selecciona año</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded 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.
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="2024-01-10 2024-01-20"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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.
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="2024-01-10/2024-01-20"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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.
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="2024-01-16/2024-02-04"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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 text-sm" for="select-years-datepicker-range2">Selecciona año</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded 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

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>."
  },
  "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="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}

Fechas múltiples

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos. Separa tus fechas con un espacio.
Mostrar códigodel ejemplo: Fechas múltiples

Contenido

Nunjucks macro


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-hint-text",
  "name": "test-name",
  "label": {
    "text": "Elige tus días disponibles"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden=\"true\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa tus fechas con un espacio."
  },
  "value": "2024-01-10 2024-01-20"
}) %}
<calendar-multi
    value="2024-01-10 2024-01-20"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos. Separa la fecha inicial de la final con una barra /.
Mostrar códigodel ejemplo: Rango de fechas

Contenido

Nunjucks macro


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-hint-text",
  "name": "test-name",
  "label": {
    "text": "Elige tus días disponibles"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden=\"true\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa la fecha inicial de la final con una barra /."
  },
  "value": "2024-01-10/2024-01-20"
}) %}
<calendar-range
    value="2024-01-10/2024-01-20"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos. Separa la fecha inicial de la final con una /.
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",
  "name": "test-name",
  "label": {
    "text": "Elige tus días disponibles"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden=\"true\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa la fecha inicial de la final con una /."
  },
  "value": "2024-01-16/2024-02-04"
}) %}
<calendar-range
    months="2"
    value="2024-01-16/2024-02-04"
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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 text-sm" for="select-years-datepicker-with-hint-text">Selecciona año</label>
  <!-- /label -->
  <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded 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" name="select-years-datepicker-with-hint-text">
    <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  %}

Con placeholder y label invisible

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

Contenido

Nunjucks macro


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-placeholder",
  "name": "test-name",
  "label": {
    "text": "Elige rango de fechas",
    "classes": "sr-only"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden=\"true\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.",
    "classes": "sr-only"
  },
  "placeholder": "Elige fecha de inicio. Ej.: AAAA-MM-DD"
}) %}
<calendar-date
    min="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}

Deshabilitado

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}

Con mensaje de error

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

Error: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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>."
  },
  "errorMessage": {
    "text": "Error: 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="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}

Peque

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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="2024-01-01"
    max="2024-12-31"
    locale="es-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-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.

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}

Botón personalizado pequeño

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

Usa el formato: año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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\">AAAA-MM-DD (año-mes-día)</span><span class=\"sr-only\">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos 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="2024-01-01"
    max="2024-12-31"
    locale="es-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-date>
{% endcall  %}