Last modified: Jul 17, 2025

Datepicker

🚧 This documentation is a work in progress.

Usage

Anatomy

+

Properties

Required properties: id, type, basicDataModelBindings.simpleBinding

PropertyTypeDescription
idstringThe component ID. Must be unique within all layouts/pages in a layout-set. Cannot end with dash or number.
typestringThe component type.
basicDataModelBindingsobjectData model bindings for the component
basicDataModelBindings.simpleBindingstringData model binding for a component’s connection to a single field in the data model
basicTextResourcesobjectText resource bindings for a component.
basicTextResources.titlestringThe title/label text for the component
basicTextResources.descriptionstringThe description text for the component
basicTextResources.helpstringThe help text for the component
basicTextResources.shortNamestringThe short name for the component (used in validation messages) (optional). If it is not specified, ’title’ text is used.
basicTextResources.tableTitlestringThe text shown in column title when component is used in repeating group (optional). If it is not specified, ’title’ text is used.
requiredbooleanBoolean or expression indicating if the component is required when filling in the form. Defaults to false.
readOnlybooleanBoolean or expression indicating if the component should be presented as read only. Defaults to false.
Please note that even with read-only fields in components, it may currently be possible to update the field by modifying the request sent to the API or through a direct API call.
formatstringLong date format used when displaying the date to the user. The user date format from the locale will be prioritized over this setting.
Example(s): DD/MM/YYYY,MM/DD/YYYY,YYYY-MM-DD
gridobjectSettings for the components grid. Used for controlling horizontal alignment.
Example(s): {xs: 12}
grid.innerGridgridPropsOptional grid for inner component content like input field or dropdown. Used to avoid inner content filling the component width.
Example(s): {xs: 12}
See: gridProps
grid.labelGridgridPropsOptional grid for the component label. Used in combination with innerGrid to align labels on the side.
Example(s): {xs: 12}
See: gridProps
hiddenbooleanBoolean value or expression indicating if the component should be hidden. Defaults to false.
maxDatestringSets the maximum allowed date. Can also use keywords today, yesterday, tomorrow, oneYearFromNow and oneYearAgo to define a maximum date based on the current date. Defaults to 2100-01-01T12:00:00.000Z.
minDatestringSets the minimum allowed date. Can also use keywords today, yesterday, tomorrow, oneYearFromNow and oneYearAgo to define a minimum date based on the current date. Defaults to 1900-01-01T12:00:00.000Z.
pageBreakobjectEnables page break settings in PDF output.
pageBreak.breakAfterstringPDF only: Indicates whether a page break should be added after the component.
Allowed values: auto (default), always, avoid.
pageBreak.breakBeforestringPDF only: Indicates whether a page break should be added before the component.
Allowed values: auto (default), always, avoid.
renderAsSummarybooleanBoolean or expression indicating if the component should be rendered as a summary. Defaults to false.
timeStampbooleanBoolean value indicating if the date time should be stored as a timeStamp. Defaults to true. If true: YYYY-MM-DDThh:mm:ss.sssZ, if false YYYY-MM-DD;

Configuration

We are currently updating Altinn Studio Designer with more configuration options! The documentation is continuously updated, and there may be more settings available than what is described here, and some settings may be in beta version.

Add component

    You can add a component in Altinn Studio Designer by dragging it from the list of components to the page area. Selecting the component brings up its configuration panel.

    Basic component:

    App/ui/layouts/{page}.json
    {
  "$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
    "data": {
      "layout": [
        {
          // Basic component (required properties)
        }
      ]
    }
  }
}

    Examples