desy-html

Datepicker

Parámetros Nunjucks del componente: "Datepicker". Versión: 12.0.1

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: containerClasses\n  type: string\n  required: false\n  description: Classes for the container.\n- name: containerAttributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the container element.\n- name: standalone\n  type: boolean\n  required: false\n  description: If `true` the datepicker only shows the months and navigation without the input. Defaults to `false.\n- name: id\n  type: string\n  required: true\n  description: The id of the input.\n- name: name\n  type: string\n  required: true\n  description: The name of the input, which is submitted with the form data.\n- name: type\n  type: string\n  required: false\n  description: Type of input control to render. Defaults to \"text\".\n- name: inputmode\n  type: string\n  require: false\n  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the input.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: true\n  description: Options for the label component.\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  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`.\n  isComponent: true\n- name: errorId\n  type: string\n  required: false\n  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.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the input.\n- name: autocomplete\n  type: string\n  required: false\n  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.\n- name: pattern\n  type: string\n  required: false\n  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.\n- name: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, input will be disabled.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the anchor tag.\n- name: dropdown\n  type: component\n  required: false\n  description: dropdown component parameters. If there are any, the datepicker will show a dropdown after the input instead of the calendar icon.\n- name: dropdownClasses\n  type: string\n  required: false\n  description: Classes to add to the dropdown.\n- name: caller\n  type: nunjucks-block\n  required: false\n  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.","length":4172}

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.

Ejemplo: "Standalone fecha única", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <calendar-date
      min="01-01-2024"
      max="01-01-2025"
      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 -->

Ejemplo: "Standalone fecha única", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-date\",\"standalone\":true}") %}
  <calendar-date
    min="01-01-2024"
    max="01-01-2025"
    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  %}
Mostrar códigodel ejemplo: Standalone fecha única

Contenido

Nunjucks macro

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

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

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

Standalone fecha única y selector de año

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

Ejemplo: "Standalone fecha única y selector de año", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <calendar-date
      value="01-10-2024"
      min="01-01-2024"
      max="12-31-2024"
      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 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 -->

Ejemplo: "Standalone fecha única y selector de año", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-years\",\"standalone\":true}") %}
  <calendar-date
    value="01-10-2024"
    min="01-01-2024"
    max="12-31-2024"
    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 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  %}
Mostrar códigodel ejemplo: Standalone fecha única y selector de año

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-years",
  "standalone": true
}) %}
<calendar-date
    value="01-10-2024"
    min="01-01-2024"
    max="12-31-2024"
    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 font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="select-years-datepicker-years" name="select-years-datepicker-years">
    <option value="2024" selected>2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</div>
<!-- /select -->
  </div>

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

Standalone fechas múltiples

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

Ejemplo: "Standalone fechas múltiples", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <calendar-multi
      value="10-01-2024 20-01-2024"
      min="01-01-2024"
      max="31-12-2024"
      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 -->

Ejemplo: "Standalone fechas múltiples", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-multi\",\"standalone\":true}") %}
  <calendar-multi
    value="10-01-2024 20-01-2024"
    min="01-01-2024"
    max="31-12-2024"
    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  %}
Mostrar códigodel ejemplo: Standalone fechas múltiples

Contenido

Nunjucks macro

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

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

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

Standalone rango de fechas

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

Ejemplo: "Standalone rango de fechas", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="p-sm overflow-x-auto">
    <calendar-range
      value="10-01-2024/20-01-2024"
      min="01-01-2024"
      max="21-12-2024"
      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 -->

Ejemplo: "Standalone rango de fechas", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-range\",\"standalone\":true}") %}
  <calendar-range
    value="10-01-2024/20-01-2024"
    min="01-01-2024"
    max="21-12-2024"
    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  %}
Mostrar códigodel ejemplo: Standalone rango de fechas

Contenido

Nunjucks macro

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

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

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

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

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

Ejemplo: "Standalone rango de fechas 2 meses y selector de año", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Standalone rango de fechas 2 meses y selector de año", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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 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  %}
Mostrar códigodel ejemplo: Standalone rango de fechas 2 meses y selector de año

Contenido

Nunjucks macro

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

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

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

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

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                max="01-01-2025"
                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 -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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-2024"
    max="01-01-2025"
    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  %}

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

Contenido

Nunjucks macro

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

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

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

Fechas múltiples

Ejemplo: "Fechas múltiples", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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">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> Separa tus fechas con un espacio.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                min="01-01-2024"
                max="31-12-2024"
                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 -->

Ejemplo: "Fechas múltiples", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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\":\"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> Separa tus fechas con un espacio.\"},\"value\":\"10-01-2024 20-01-2024\"}") %}
  <calendar-multi
    value="10-01-2024 20-01-2024"
    min="01-01-2024"
    max="31-12-2024"
    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  %}

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. Separa tus fechas con un espacio.
Mostrar códigodel ejemplo: Fechas múltiples

Contenido

Nunjucks macro

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

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

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

Rango de fechas

Ejemplo: "Rango de fechas", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- datepicker -->
<div data-module="c-datepicker" class="c-datepicker">
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="datepicker-range3">Elige tus días disponibles</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-range3-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> Separa la fecha inicial de la final con una barra /.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                min="01-01-2024"
                max="21-12-2024"
                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 -->

Ejemplo: "Rango de fechas", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-range3\",\"name\":\"test-name\",\"label\":{\"text\":\"Elige tus días disponibles\"},\"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> Separa la fecha inicial de la final con una barra /.\"},\"value\":\"10-01-2024/20-01-2024\"}") %}
  <calendar-range
    value="10-01-2024/20-01-2024"
    min="01-01-2024"
    max="21-12-2024"
    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  %}

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. Separa la fecha inicial de la final con una barra /.
Mostrar códigodel ejemplo: Rango de fechas

Contenido

Nunjucks macro

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

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

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

Rango de fechas 2 meses y selector de año

Ejemplo: "Rango de fechas 2 meses y selector de año", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 tus días disponibles</label>
    <!-- /label -->
    <!-- hint -->
    <p id="datepicker-with-hint-text-and-year-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> Separa la fecha inicial de la final con una /.</p>
    <!-- /hint -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded 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 max-w-xs align-middle truncate"><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 -ml-sm 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 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 -->

Ejemplo: "Rango de fechas 2 meses y selector de año", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker ("{\"id\":\"datepicker-with-hint-text-and-year\",\"name\":\"test-name\",\"label\":{\"text\":\"Elige tus días disponibles\"},\"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> Separa la fecha inicial de la final con una /.\"},\"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 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  %}

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. Separa la fecha inicial de la final con una /.
Mostrar códigodel ejemplo: Rango de fechas 2 meses y selector de año

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-hint-text-and-year",
  "name": "test-name",
  "label": {
    "text": "Elige tus días disponibles"
  },
  "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> Separa la fecha inicial de la final con una /."
  },
  "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 font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="select-years-datepicker-with-hint-text-and-year" name="select-years-datepicker-with-hint-text-and-year">
    <option value="2024" selected>2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
  </select>
</div>
<!-- /select -->
  </div>

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

Deshabilitado

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                max="01-01-2025"
                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 -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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-2024"
    max="01-01-2025"
    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  %}

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

Contenido

Nunjucks macro

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

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

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

Con mensaje de error

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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>Error: Esto es un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="relative">
      <input class="c-input block mt-sm border-black rounded 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-error datepicker-with-error-message-hint datepicker-with-error-message-error" 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                max="01-01-2025"
                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 -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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\":\"Error: Esto es un mensaje de error\",\"classes\":\"mt-xs\"},\"pattern\":\"(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))\"}") %}
  <calendar-date
    min="01-01-2024"
    max="01-01-2025"
    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  %}

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:Error: Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

Contenido

Nunjucks macro

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

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

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

Peque

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 max-w-xs align-middle truncate"><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 -ml-sm 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-2024"
                max="01-01-2025"
                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 -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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-2024"
    max="01-01-2025"
    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  %}

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

Contenido

Nunjucks macro

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

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

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

Botón personalizado

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

Ejemplo: "Botón personalizado", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 max-w-xs align-middle truncate">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 -ml-sm 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-2024"
              max="01-01-2025"
              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 -->

Ejemplo: "Botón personalizado", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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-2024"
    max="01-01-2025"
    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  %}

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

Contenido

Nunjucks macro

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

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

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

Botón personalizado pequeño

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

Ejemplo: "Botón personalizado pequeño", de código HTML, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 max-w-xs align-middle truncate">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 -ml-sm 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-2024"
              max="01-01-2025"
              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 -->

Ejemplo: "Botón personalizado pequeño", de código Nunjucks, para maquetar el componente: "Datepicker", versión: 12.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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-2024"
    max="01-01-2025"
    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  %}

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

Contenido

Nunjucks macro

{% from "components/datepicker/_macro.datepicker.njk" import componentDatepicker %}
{% call componentDatepicker({
  "id": "datepicker-with-button-small",
  "name": "test-name",
  "label": {
    "text": "Elige fecha de inicio",
    "classes": "text-sm"
  },
  "hint": {
    "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
    "classes": "text-sm"
  },
  "dropdown": {
    "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
    "classes": "c-dropdown--sm"
  },
  "classes": "flex-1 c-input--sm",
  "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))"
}) %}
<calendar-date
    min="01-01-2024"
    max="01-01-2025"
    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  %}