desy-html

Date-input

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: This is used for the main component and to compose id attribute for each item.
- name: namePrefix
  type: string
  required: false
  description: Optional prefix. This is used to prefix each `item.name` using `-`.
- name: items
  type: array
  required: false
  description: An array of input objects with name, value and classes.
  params:
  - name: id
    type: string
    required: false
    description: Item-specific id. If provided, it will be used instead of the generated id.
  - name: name
    type: string
    required: true
    description: Item-specific name attribute.
  - name: label
    type: component
    required: true
    description: Item-specific label params.
  - name: hasErrors
    type: boolean
    required: false
    description: If true, the input will have aria-errormessage pointing to the errorMessage.
  - name: value
    type: string
    required: false
    description: If provided, it will be used as the initial value of the input.
  - name: autocomplete
    type: string
    required: false
    description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "bday-day". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
  - name: pattern
    type: string
    required: false
    description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
  - name: disabled
    type: boolean
    required: false
    description: If true, input will be disabled.
  - name: divider
    type: object
    required: false
    description: Divider item that separates items.
    - name: text
      type: string
      required: true
      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.
    - name: html
      type: string
      required: true
      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.
  - name: classes
    type: string
    required: false
    description: Classes to add to date input item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the date input tag.
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: fieldset
  type: object
  required: false
  description: Options for the fieldset component (e.g. legend).
  isComponent: true
- name: classes
  type: string
  required: false
  description: Classes to add to the date-input container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the date-input container.

Por defecto

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

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

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

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

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

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

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

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

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

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

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

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

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"
      }
    }
  ]
}) }}