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 Nunjucks del componente: "Datepicker"

              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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <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>
  </div>
</div>
<!-- /datepicker -->

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.

Selecciona un año para cargar sus datos

Mostrar código

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <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>
  </div>
</div>
<!-- /datepicker -->

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <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>
  </div>
</div>
<!-- /datepicker -->

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <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>
  </div>
</div>
<!-- /datepicker -->

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.

Selecciona un año para cargar sus datos

Mostrar código

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <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>
  </div>
</div>
<!-- /datepicker -->

Por defecto #

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-default">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-default-hint" class="block text-neutral-dark">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></p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full" id="datepicker-default" name="test-name" type="text" aria-describedby="datepicker-default-hint">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-default-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-default-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-default-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-default-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Fechas múltiples #

Elige tus días disponibles

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-multiple-dates">Elige tus días disponibles</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-multiple-dates-hint" class="block text-neutral-dark">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.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full" id="datepicker-multiple-dates" name="test-name" type="text" value="10-01-2024 20-01-2024" aria-describedby="datepicker-multiple-dates-hint">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-multiple-dates-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-multiple-dates-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-multiple-dates-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-multiple-dates-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Rango de fechas #

Elige tu rango de días disponibles

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-range3">Elige tu rango de días disponibles</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-range3-hint" class="block text-neutral-dark">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.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full" id="datepicker-range3" name="test-name" type="text" value="10-01-2024/20-01-2024" aria-describedby="datepicker-range3-hint">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-range3-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-range3-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-range3-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-range3-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Rango de fechas 2 meses y selector de año #

Elige tu rango de días disponibles

Mostrar código

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-with-hint-text-and-year">Elige tu rango de días disponibles</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-with-hint-text-and-year-hint" class="block text-neutral-dark">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.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full" id="datepicker-with-hint-text-and-year" name="test-name" type="text" value="16-01-2024/04-02-2024" aria-describedby="datepicker-with-hint-text-and-year-hint">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-with-hint-text-and-year-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-with-hint-text-and-year-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-with-hint-text-and-year-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-with-hint-text-and-year-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Deshabilitado #

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-disabled">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-disabled-hint" class="block text-neutral-dark">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></p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full" id="datepicker-disabled" name="test-name" type="text" aria-describedby="datepicker-disabled-hint" 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))" disabled>
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-disabled-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha" disabled="disabled" aria-disabled="true">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-disabled-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-disabled-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-disabled-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

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.

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group c-form-group--error">
    <!-- label -->
    <label class="block" for="datepicker-with-error-message">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-with-error-message-hint" class="block text-neutral-dark">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></p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="datepicker-with-error-message-error" class="block font-semibold text-alert-base mt-xs">
      <span class="sr-only">Error:</span>Esto es un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full border-alert-base ring-2 ring-alert-base " id="datepicker-with-error-message" name="test-name" type="text" aria-describedby="datepicker-with-error-message-hint" aria-errormessage="datepicker-with-error-message-error" aria-invalid="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))">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-with-error-message-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-with-error-message-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-with-error-message-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-with-error-message-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Peque #

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block text-sm" for="datepicker-small">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-small-hint" class="block text-neutral-dark text-sm">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></p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-16 w-full c-input--sm" id="datepicker-small" name="test-name" type="text" aria-describedby="datepicker-small-hint" 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))">
      <div class="absolute top-0 right-0">
        <!-- dropdown -->
        <div data-module="c-dropdown" class=" relative">
          <button class="c-dropdown c-dropdown--sm c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true" id="datepicker-small-dropdown" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Selección de fecha">
            <span class="inline-flex self-center align-middle"><span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true">
                <g>
                  <path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path>
                </g>
              </svg></span>
            <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
              <g>
                <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
              </g>
            </svg></button>
          <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
            <div class="p-sm overflow-x-auto">
              <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>
            </div>
            <ul class="flex flex-wrap justify-between gap-sm p-sm">
              <li>
                <!-- button -->
                <button class="c-button c-button--primary c-button--sm" id="datepicker-small-submit">
                  Aceptar
                </button>
                <!-- /button -->
              </li>
              <li>
                <!-- button -->
                <button class="c-button  c-button--sm" id="datepicker-small-cancel">
                  Cancelar
                </button>
                <!-- /button -->
              </li>
            </ul>
          </div>
        </div>
        <!-- /dropdown -->
        <script>
          document.getElementById('datepicker-small-dropdown').setAttribute('aria-haspopup', 'dialog');
        </script>
      </div>
    </div>
  </div>
</div>
<!-- /datepicker -->

Botón personalizado #

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

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-with-personalized-button">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-with-personalized-button-hint" class="block text-neutral-dark">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></p>
    <!-- /hint -->
    <div class="relative flex flex-wrap items-end gap-sm">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1" id="datepicker-with-personalized-button" name="test-name" type="text" aria-describedby="datepicker-with-personalized-button-hint" 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))">
      <!-- dropdown -->
      <div data-module="c-dropdown" class=" relative">
        <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
          <span class="inline-flex self-center align-middle">Seleccionar fecha<span class="sr-only"> con tabla de calendario</span></span>
          <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
            <g>
              <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
            </g>
          </svg></button>
        <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
          <div class="p-sm overflow-x-auto">
            <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>
          </div>
          <ul class="flex flex-wrap justify-between gap-sm p-sm">
            <li>
              <!-- button -->
              <button class="c-button c-button--primary c-button--sm" id="datepicker-with-personalized-button-submit">
                Aceptar
              </button>
              <!-- /button -->
            </li>
            <li>
              <!-- button -->
              <button class="c-button  c-button--sm" id="datepicker-with-personalized-button-cancel">
                Cancelar
              </button>
              <!-- /button -->
            </li>
          </ul>
        </div>
      </div>
      <!-- /dropdown -->
    </div>
  </div>
</div>
<!-- /datepicker -->

Botón personalizado pequeño #

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

Elige fecha de inicio

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ódigo

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  %}

HTML

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block text-sm" for="datepicker-with-button-small">Elige fecha de inicio</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-with-button-small-hint" class="block text-neutral-dark text-sm">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></p>
    <!-- /hint -->
    <div class="relative flex flex-wrap items-end gap-sm">
      <input class="c-input block mt-sm border-black rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1 c-input--sm" id="datepicker-with-button-small" name="test-name" type="text" aria-describedby="datepicker-with-button-small-hint" 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))">
      <!-- dropdown -->
      <div data-module="c-dropdown" class=" relative">
        <button class="c-dropdown c-dropdown--sm" data-module="c-dropdown-button" aria-haspopup="true">
          <span class="inline-flex self-center align-middle">Seleccionar fecha<span class="sr-only"> con tabla de calendario</span></span>
          <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
            <g>
              <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
            </g>
          </svg></button>
        <div class="c-dropdown__tooltip min-w-auto! mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
          <div class="p-sm overflow-x-auto">
            <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>
          </div>
          <ul class="flex flex-wrap justify-between gap-sm p-sm">
            <li>
              <!-- button -->
              <button class="c-button c-button--primary c-button--sm" id="datepicker-with-button-small-submit">
                Aceptar
              </button>
              <!-- /button -->
            </li>
            <li>
              <!-- button -->
              <button class="c-button  c-button--sm" id="datepicker-with-button-small-cancel">
                Cancelar
              </button>
              <!-- /button -->
            </li>
          </ul>
        </div>
      </div>
      <!-- /dropdown -->
    </div>
  </div>
</div>
<!-- /datepicker -->

Componentes Índice de páginas

Calendario

Datepicker

Standalone fecha única #

Contenido

Nunjucks macro

HTML

Standalone fecha única y selector de año #

Contenido

Nunjucks macro

HTML

Standalone fechas múltiples #

Contenido

Nunjucks macro

HTML

Standalone rango de fechas #

Contenido

Nunjucks macro

HTML

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

Contenido

Nunjucks macro

HTML

Por defecto #

Contenido

Nunjucks macro

HTML

Fechas múltiples #

Contenido

Nunjucks macro

HTML

Rango de fechas #

Contenido

Nunjucks macro

HTML

Rango de fechas 2 meses y selector de año #

Contenido

Nunjucks macro

HTML

Deshabilitado #

Contenido

Nunjucks macro

HTML

Con mensaje de error #

Contenido

Nunjucks macro

HTML

Peque #

Contenido

Nunjucks macro

HTML

Botón personalizado #

Contenido

Nunjucks macro

HTML

Botón personalizado pequeño #

Contenido

Nunjucks macro

HTML