Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Date input

Date input

Code

Markup



<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <div class="govuk-date-input" id="dob">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob",
  "namePrefix": "dob",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4"
    }
  ]
}) }}

Date input with errors only

(open in a new window)
Code

Markup



<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-errors-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-errors-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <div class="govuk-date-input" id="dob-errors">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-errors",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4 govuk-input--error"
    }
  ]
}) }}

Date input with errors and hint

(open in a new window)
Code

Markup



<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-errors-hint dob-errors-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-errors-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-errors-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <div class="govuk-date-input" id="dob-errors">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-errors",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4 govuk-input--error"
    }
  ]
}) }}

Date input with error on day input

(open in a new window)
Code

Markup



<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-day-error-hint dob-day-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-day-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-day-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <div class="govuk-date-input" id="dob-day-error">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-day-error",
  "namePrefix": "dob-day-error",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4"
    }
  ]
}) }}

Date input with error on month input

(open in a new window)
Code

Markup



<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-month-error-hint dob-month-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-month-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-month-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <div class="govuk-date-input" id="dob-month-error">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-month-error",
  "namePrefix": "dob-month-error",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2 govuk-input--error"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4"
    }
  ]
}) }}

Date input with error on year input

(open in a new window)
Code

Markup



<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-year-error-hint dob-year-error-error" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-year-error-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <span id="dob-year-error-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <div class="govuk-date-input" id="dob-year-error">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-year-error",
  "namePrefix": "dob-year-error",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4 govuk-input--error"
    }
  ]
}) }}

Date input with default items

(open in a new window)
Code

Markup



<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <div class="govuk-date-input" id="dob">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob",
  "namePrefix": "dob",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  }
}) }}

Date input with optional form-group classes

(open in a new window)
Code

Markup



<div class="govuk-form-group extra-class">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <div class="govuk-date-input" id="dob">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month"  type="number" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year"  type="number" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob",
  "namePrefix": "dob",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "formGroup": {
    "classes": "extra-class"
  }
}) }}

Date input with autocomplete values

(open in a new window)
Code

Markup



<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-with-autocomplete-attribute-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-with-autocomplete-attribute-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <div class="govuk-date-input" id="dob-with-autocomplete-attribute">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-day" name="dob-with-autocomplete-day"  type="number" autocomplete="bday-day" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-month" name="dob-with-autocomplete-month"  type="number" autocomplete="bday-month" pattern="[0-9]*">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-autocomplete-attribute-year" name="dob-with-autocomplete-year"  type="number" autocomplete="bday-year" pattern="[0-9]*">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-with-autocomplete-attribute",
  "namePrefix": "dob-with-autocomplete",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2",
      "autocomplete": "bday-day"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2",
      "autocomplete": "bday-month"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4",
      "autocomplete": "bday-year"
    }
  ]
}) }}

Date input with input attributes

(open in a new window)
Code

Markup



<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-with-input-attributes-hint" role="group">
  <legend class="govuk-fieldset__legend">
    What is your date of birth?
  </legend>
  <span id="dob-with-input-attributes-hint" class="govuk-hint">
    For example, 31 3 1980
  </span>
  <div class="govuk-date-input" id="dob-with-input-attributes">
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-day">
          Day
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-day" name="dob-with-input-attributes-day"  type="number" pattern="[0-9]*" data-example-day="day">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-month">
          Month
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-month" name="dob-with-input-attributes-month"  type="number" pattern="[0-9]*" data-example-month="month">
      </div>
    </div>
    <div class="govuk-date-input__item">
      <div class="govuk-form-group">
        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-year">
          Year
        </label>
        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-input-attributes-year" name="dob-with-input-attributes-year"  type="number" pattern="[0-9]*" data-example-year="year">
      </div>
    </div>
  </div>
</fieldset>
</div>

Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
  "id": "dob-with-input-attributes",
  "namePrefix": "dob-with-input-attributes",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "hint": {
    "text": "For example, 31 3 1980"
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2",
      "attributes": {
        "data-example-day": "day"
      }
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2",
      "attributes": {
        "data-example-month": "month"
      }
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4",
      "attributes": {
        "data-example-year": "year"
      }
    }
  ]
}) }}