desy-html

Date-input

Parámetros Nunjucks del componente: "Date-input". Versión: 12.1.0

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

        {"val":"params:\r\n- name: id\r\n  type: string\r\n  required: true\r\n  description: This is used for the main component and to compose id attribute for each item.\r\n- name: namePrefix\r\n  type: string\r\n  required: false\r\n  description: Optional prefix. This is used to prefix each `item.name` using `-`.\r\n- name: items\r\n  type: array\r\n  required: false\r\n  description: An array of input objects with name, value and classes.\r\n  params:\r\n  - name: id\r\n    type: string\r\n    required: false\r\n    description: Item-specific id. If provided, it will be used instead of the generated id.\r\n  - name: name\r\n    type: string\r\n    required: true\r\n    description: Item-specific name attribute.\r\n  - name: label\r\n    type: component\r\n    required: true\r\n    description: Item-specific label params.\r\n  - name: hasErrors\r\n    type: boolean\r\n    required: false\r\n    description: If true, the input will have aria-errormessage pointing to the errorMessage.\r\n  - name: value\r\n    type: string\r\n    required: false\r\n    description: If provided, it will be used as the initial value of the input.\r\n  - name: autocomplete\r\n    type: string\r\n    required: false\r\n    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance \"bday-day\". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.\r\n  - name: pattern\r\n    type: string\r\n    required: false\r\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.\r\n  - name: disabled\r\n    type: boolean\r\n    required: false\r\n    description: If true, input will be disabled.\r\n  - name: divider\r\n    type: object\r\n    required: false\r\n    description: Divider item that separates items.\r\n    - name: text\r\n      type: string\r\n      required: true\r\n      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.\r\n    - name: html\r\n      type: string\r\n      required: true\r\n      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to date input item.\r\n  - name: attributes\r\n    type: object\r\n    required: false\r\n    description: HTML attributes (for example data attributes) to add to the date input tag.\r\n- name: hint\r\n  type: object\r\n  required: false\r\n  description: Options for the hint component.\r\n  isComponent: true\r\n- name: errorMessage\r\n  type: object\r\n  required: false\r\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`.\r\n  isComponent: true\r\n- name: formGroup\r\n  type: object\r\n  required: false\r\n  description: Options for the form-group wrapper\r\n  params:\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\r\n- name: fieldset\r\n  type: object\r\n  required: false\r\n  description: Options for the fieldset component (e.g. legend).\r\n  isComponent: true\r\n- name: classes\r\n  type: string\r\n  required: false\r\n  description: Classes to add to the date-input container.\r\n- name: attributes\r\n  type: object\r\n  required: false\r\n  description: HTML attributes (for example data attributes) to add to the date-input container.","length":3652}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-hint">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-día" name="fechnacim-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-mes" name="fechnacim-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-año" name="fechnacim-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

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

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim",
  "namePrefix": "fechnacim",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim",
  "namePrefix": "fechnacim",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con errores solo

Ejemplo: "Con errores solo", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-errors-a-error" aria-errormessage="fechnacim-errors-a-error">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- error-message -->
    <p id="fechnacim-errors-a-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Aqui va un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="flex" id="fechnacim-errors-a">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-a-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-a-día" name="día" type="text" aria-errormessage="fechnacim-errors-a-error" aria-invalid="true" aria-describedby="fechnacim-errors-a-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-a-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-a-mes" name="mes" type="text" aria-errormessage="fechnacim-errors-a-error" aria-invalid="true" aria-describedby="fechnacim-errors-a-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-a-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-a-año" name="año" type="text" aria-errormessage="fechnacim-errors-a-error" aria-invalid="true" aria-describedby="fechnacim-errors-a-error" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con errores solo", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-errors-a",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Error:Error: Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con errores solo

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-errors-a",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con errores y pista

Ejemplo: "Con errores y pista", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-errors-b-hint fechnacim-errors-b-error" aria-errormessage="fechnacim-errors-b-error">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-errors-b-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="fechnacim-errors-b-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Aqui va un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="flex" id="fechnacim-errors-b">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-b-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-b-día" name="día" type="text" aria-errormessage="fechnacim-errors-b-error" aria-invalid="true" aria-describedby="fechnacim-errors-b-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-b-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-b-mes" name="mes" type="text" aria-errormessage="fechnacim-errors-b-error" aria-invalid="true" aria-describedby="fechnacim-errors-b-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-errors-b-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20  border-alert-base ring-2 ring-alert-base" id="fechnacim-errors-b-año" name="año" type="text" aria-errormessage="fechnacim-errors-b-error" aria-invalid="true" aria-describedby="fechnacim-errors-b-error" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con errores y pista", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-errors-b",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Error:Error: Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con errores y pista

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-errors-b",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del día

Ejemplo: "Con error en el input del día", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-day-error-hint fechnacim-day-error-error" aria-errormessage="fechnacim-day-error-error">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-day-error-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="fechnacim-day-error-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Aqui va un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="flex" id="fechnacim-day-error">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-day-error-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-day-error-día" name="fechnacim-day-error-día" type="text" aria-errormessage="fechnacim-day-error-error" aria-invalid="true" aria-describedby="fechnacim-day-error-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-day-error-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-day-error-mes" name="fechnacim-day-error-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-day-error-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-day-error-año" name="fechnacim-day-error-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con error en el input del día", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-day-error",
  "namePrefix": "fechnacim-day-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Error:Error: Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del día

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-day-error",
  "namePrefix": "fechnacim-day-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del mes

Ejemplo: "Con error en el input del mes", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-month-error-hint fechnacim-month-error-error" aria-errormessage="fechnacim-month-error-error">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-month-error-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="fechnacim-month-error-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Aqui va un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="flex" id="fechnacim-month-error">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-month-error-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-month-error-día" name="fechnacim-month-error-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-month-error-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14  border-alert-base ring-2 ring-alert-base" id="fechnacim-month-error-mes" name="fechnacim-month-error-mes" type="text" aria-errormessage="fechnacim-month-error-error" aria-invalid="true" aria-describedby="fechnacim-month-error-error" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-month-error-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-month-error-año" name="fechnacim-month-error-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con error en el input del mes", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-month-error",
  "namePrefix": "fechnacim-month-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Error:Error: Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del mes

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-month-error",
  "namePrefix": "fechnacim-month-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "hasErrors": true,
      "classes": "w-14  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con error en el input del año

Ejemplo: "Con error en el input del año", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group c-form-group--error">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-year-error-hint fechnacim-year-error-error" aria-errormessage="fechnacim-year-error-error">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-year-error-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <!-- error-message -->
    <p id="fechnacim-year-error-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Aqui va un mensaje de error
    </p>
    <!-- /error-message -->
    <div class="flex" id="fechnacim-year-error">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-year-error-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-year-error-día" name="fechnacim-year-error-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-year-error-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-year-error-mes" name="fechnacim-year-error-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-year-error-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20  border-alert-base ring-2 ring-alert-base" id="fechnacim-year-error-año" name="fechnacim-year-error-año" type="text" aria-errormessage="fechnacim-year-error-error" aria-invalid="true" aria-describedby="fechnacim-year-error-error" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con error en el input del año", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-year-error",
  "namePrefix": "fechnacim-year-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Error:Error: Aqui va un mensaje de error

Mostrar códigodel ejemplo: Con error en el input del año

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-year-error",
  "namePrefix": "fechnacim-year-error",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error: Aqui va un mensaje de error"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "hasErrors": true,
      "classes": "w-20  border-alert-base ring-2 ring-alert-base",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con items por defecto

Ejemplo: "Con items por defecto", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-default-items-hint">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-default-items-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-default-items">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-default-items-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-default-items-día" name="fechnacim-default-items-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-default-items-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-default-items-mes" name="fechnacim-default-items-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-default-items-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-default-items-año" name="fechnacim-default-items-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con items por defecto", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-default-items",
  "namePrefix": "fechnacim-default-items",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  }
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Con items por defecto

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-default-items",
  "namePrefix": "fechnacim-default-items",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  }
}) }}

Input de tiempo

Ejemplo: "Input de tiempo", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="time-hint">
    <legend class="font-bold">
      Hora de publicación
    </legend>
    <!-- hint -->
    <p id="time-hint" class="block text-neutral-dark">Por ejemplo, 14:30</p>
    <!-- /hint -->
    <div class="flex" id="time">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="time-hora">Hora</label>
          <!-- /label -->
          <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 mb-0 w-14" id="time-hora" name="time-hora" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="flex items-end mb-sm mr-base" role="separator">
        <p>
          :
        </p>
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="time-minutos">Minutos</label>
          <!-- /label -->
          <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 mb-0 w-14" id="time-minutos" name="time-minutos" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Input de tiempo", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "time",
  "namePrefix": "time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30"
  },
  "items": [
    {
      "name": "hora",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-sm mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}
Hora de publicación

Por ejemplo, 14:30

Mostrar códigodel ejemplo: Input de tiempo

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "time",
  "namePrefix": "time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30"
  },
  "items": [
    {
      "name": "hora",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-sm mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "w-14",
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}

Con clases de form-group opcionales

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group p-base bg-primary-light">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-formgroup-classes-hint">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-formgroup-classes-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-formgroup-classes">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-formgroup-classes-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-formgroup-classes-día" name="fechnacim-formgroup-classes-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-formgroup-classes-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-formgroup-classes-mes" name="fechnacim-formgroup-classes-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-formgroup-classes-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-formgroup-classes-año" name="fechnacim-formgroup-classes-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-formgroup-classes",
  "namePrefix": "fechnacim-formgroup-classes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Con clases de form-group opcionales

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-formgroup-classes",
  "namePrefix": "fechnacim-formgroup-classes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

Con valores de autocompletado

Ejemplo: "Con valores de autocompletado", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-with-autocomplete-attribute-hint">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-with-autocomplete-attribute-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-with-autocomplete-attribute">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-autocomplete-attribute-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-with-autocomplete-attribute-día" name="fechnacim-with-autocomplete-día" type="text" autocomplete="bday-day" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-autocomplete-attribute-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-with-autocomplete-attribute-mes" name="fechnacim-with-autocomplete-mes" type="text" autocomplete="bday-month" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-autocomplete-attribute-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-with-autocomplete-attribute-año" name="fechnacim-with-autocomplete-año" type="text" autocomplete="bday-year" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con valores de autocompletado", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-with-autocomplete-attribute",
  "namePrefix": "fechnacim-with-autocomplete",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "autocomplete": "bday-day",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "autocomplete": "bday-month",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "autocomplete": "bday-year",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Con valores de autocompletado

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-with-autocomplete-attribute",
  "namePrefix": "fechnacim-with-autocomplete",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "autocomplete": "bday-day",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "autocomplete": "bday-month",
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "autocomplete": "bday-year",
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Con atributos de input

Ejemplo: "Con atributos de input", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-with-input-attributes-hint">
    <legend class="font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-with-input-attributes-hint" class="block text-neutral-dark">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-with-input-attributes">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-input-attributes-día">Día</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-with-input-attributes-día" name="fechnacim-with-input-attributes-día" type="text" pattern="[0-9]*" inputmode="numeric" data-example-day="día" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-input-attributes-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 w-14" id="fechnacim-with-input-attributes-mes" name="fechnacim-with-input-attributes-mes" type="text" pattern="[0-9]*" inputmode="numeric" data-example-month="mes" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block" for="fechnacim-with-input-attributes-año">Año</label>
          <!-- /label -->
          <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 mb-0 w-20" id="fechnacim-with-input-attributes-año" name="fechnacim-with-input-attributes-año" type="text" pattern="[0-9]*" inputmode="numeric" data-example-year="año" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Con atributos de input", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-with-input-attributes",
  "namePrefix": "fechnacim-with-input-attributes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "data-example-day": "día",
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "data-example-month": "mes",
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "data-example-year": "año",
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Con atributos de input

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-with-input-attributes",
  "namePrefix": "fechnacim-with-input-attributes",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980"
  },
  "items": [
    {
      "name": "día",
      "classes": "w-14",
      "attributes": {
        "data-example-day": "día",
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "w-14",
      "attributes": {
        "data-example-month": "mes",
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "w-20",
      "attributes": {
        "data-example-year": "año",
        "maxlength": "4"
      }
    }
  ]
}) }}

Peque

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-small-hint">
    <legend class="text-sm font-bold">
      Fecha de nacimiento
    </legend>
    <!-- hint -->
    <p id="fechnacim-small-hint" class="block text-neutral-dark text-sm">Por ejemplo, 31 3 1980</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-small">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block text-sm" for="fechnacim-small-día">Dia</label>
          <!-- /label -->
          <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 mb-0 c-input--sm w-10 mt-xs" id="fechnacim-small-día" name="fechnacim-small-día" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block text-sm" for="fechnacim-small-mes">Mes</label>
          <!-- /label -->
          <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 mb-0 c-input--sm w-10 mt-xs" id="fechnacim-small-mes" name="fechnacim-small-mes" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block text-sm" for="fechnacim-small-año">Año</label>
          <!-- /label -->
          <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 mb-0 c-input--sm w-16 mt-xs" id="fechnacim-small-año" name="fechnacim-small-año" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

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

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-small",
  "namePrefix": "fechnacim-small",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "día",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Dia",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Mes",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "c-input--sm w-16 mt-xs",
      "label": {
        "text": "Año",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}
Fecha de nacimiento

Por ejemplo, 31 3 1980

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-small",
  "namePrefix": "fechnacim-small",
  "fieldset": {
    "legend": {
      "text": "Fecha de nacimiento",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, 31 3 1980",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "día",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Dia",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "mes",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Mes",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "name": "año",
      "classes": "c-input--sm w-16 mt-xs",
      "label": {
        "text": "Año",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "4"
      }
    }
  ]
}) }}

Input de tiempo peque

Ejemplo: "Input de tiempo peque", de código HTML, para maquetar el componente: "Date Input", versión: 12.1.0, 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: https://bitbucket.org/sdaragon/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: https://bitbucket.org/sdaragon/desy-html/

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

<!-- date-input -->
<div class="c-form-group">
  <!-- fieldset -->
  <fieldset role="group" aria-describedby="fechnacim-small-time-hint">
    <legend class="text-sm font-bold">
      Hora de publicación
    </legend>
    <!-- hint -->
    <p id="fechnacim-small-time-hint" class="block text-neutral-dark text-sm">Por ejemplo, 14:30</p>
    <!-- /hint -->
    <div class="flex" id="fechnacim-small-time">
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block text-sm" for="fechnacim-small-time-hora">Hora</label>
          <!-- /label -->
          <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 mb-0 c-input--sm w-10 mt-xs" id="fechnacim-small-time-hora" name="fechnacim-small-time-hora" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
      <div class="flex items-end mb-xs mr-base" role="separator">
        <p>
          :
        </p>
      </div>
      <div class="mr-base">
        <!-- input -->
        <div class="c-form-group">
          <!-- label -->
          <label class="block text-sm" for="fechnacim-small-time-minutos">Minutos</label>
          <!-- /label -->
          <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 mb-0 c-input--sm w-10 mt-xs" id="fechnacim-small-time-minutos" name="fechnacim-small-time-minutos" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="2">
        </div>
        <!-- /input -->
      </div>
    </div>
  </fieldset>
  <!-- /fieldset -->
</div>
<!-- /date-input -->

Ejemplo: "Input de tiempo peque", de código Nunjucks, para maquetar el componente: "Date Input", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

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

{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-small-time",
  "namePrefix": "fechnacim-small-time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "hora",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Hora",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-xs mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Minutos",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}
Hora de publicación

Por ejemplo, 14:30

Mostrar códigodel ejemplo: Input de tiempo peque

Contenido

Nunjucks macro
{% from "components/date-input/_macro.date-input.njk" import componentDateInput %}

{{ componentDateInput({
  "id": "fechnacim-small-time",
  "namePrefix": "fechnacim-small-time",
  "fieldset": {
    "legend": {
      "text": "Hora de publicación",
      "classes": "text-sm font-bold"
    }
  },
  "hint": {
    "text": "Por ejemplo, 14:30",
    "classes": "text-sm"
  },
  "items": [
    {
      "name": "hora",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Hora",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    },
    {
      "divider": {
        "text": ":",
        "classes": "flex items-end mb-xs mr-base"
      }
    },
    {
      "name": "minutos",
      "classes": "c-input--sm w-10 mt-xs",
      "label": {
        "text": "Minutos",
        "classes": "text-sm"
      },
      "attributes": {
        "maxlength": "2"
      }
    }
  ]
}) }}