date-input.njk

{% from "components/buttons/buttons.njk" import button as button %}
{% from "components/form/controls/helptext.njk" import helptext as helptext %}
{% from "components/form/controls/helptext.njk" import helptext_id as helptext_id %}
{% from "components/form/controls/errormessage.njk" import errorMessage as errorMessage %}
{% from "components/form/controls/errormessage.njk" import errorMessage_id as errorMessage_id %}
{% from "components/form/controls/text-input.njk" import textinput as textinput %}

{% macro datoinput(params) %}
{% set isRequired = true %}
{% if params.required === false %}{% set isRequired = false %}{% endif %}
{% if params.requiredLabel === true %}{% set isRequired = true %}{% endif %}
{% if params.optionalLabel === true %}{% set isRequired = false %}{% endif %}
{% if params.disabled === true %}{% set isRequired = false %}{% endif %}
<div class="form-group{% if params.errorMessage %} form-error{% endif %}{% if params.classes %} {{params.classes}}{% endif %}"{% if params.attributes %} {{params.attributes | safe}}{% endif %}>
    <fieldset {% if params.errorMessage or params.helptext %} aria-describedby="{% if params.helptext %}{{helptext_id(params.id)}} {% endif %}{% if params.errorMessage %}{{errorMessage_id(params.id)}} {% endif %}"{% endif %}{% if params.disabled %} disabled="disabled"{% endif %}>
        <legend class="form-label">
            {{ params.legend }}{% if params.optionalLabel %}<span class="weight-normal"> (frivilligt)</span>{% endif %}{% if params.requiredLabel %}<span class="weight-normal"> (*skal udfyldes)</span>{% endif %}
        {% if params.tooltip %}{{ button({
                "variant": "unstyled",
                "attributes": "type=\"button\"",
                "srOnly": "Hvad betyder det?",
                "icon": "help",
                "tooltip": {
                    "text": params.tooltip,
                    "showOnClick": true,
                    "position": "top"
                } 
            }) }}{% endif %}</legend>
        {% if params.helptext -%}{{ helptext({ text: params.helptext, id: params.id }) }}{% endif %}
        {% if params.errorMessage -%}{{ errorMessage({ text: params.errorMessage, id: params.id }) }}{% endif %}
        <div class="date-group mt-3">
            {% set dayId = params.id + "-day" %}
            {% set dayLabel = params.labels.day | default("Dag") %}
            {{
                textinput({
                    "id": dayId,
                    "name": params.name.day,
                    "label": dayLabel,
                    "classes": { 
                        "formgroup": "form-group-day"
                    },
                    "value": params.values.day,
                    "required": isRequired,
                    "type": "number",
                    "autocomplete": params.autocomplete.day
                })
            }}

            {% set monthId = params.id + "-month" %}
            {% set monthLabel = params.labels.month | default("Måned") %}
            {{
                textinput({
                    "id": monthId,
                    "name": params.name.month,
                    "label": monthLabel,
                    "classes": { 
                        "formgroup": "form-group-month"
                    },
                    "value": params.values.month,
                    "required": isRequired,
                    "type": "number",
                    "autocomplete": params.autocomplete.month
                })
            }}

            {% set yearId = params.id + "-year" %}
            {% set yearLabel = params.labels.year | default("År") %}
            {{
                textinput({
                    "id": yearId,
                    "name": params.name.year,
                    "label": yearLabel,
                    "classes": { 
                        "formgroup": "form-group-year"
                    },
                    "value": params.values.year,
                    "required": isRequired,
                    "type": "number",
                    "autocomplete": params.autocomplete.year
                })
            }}
        </div>
    </fieldset>
</div>
{% endmacro %}