Date Component

1. Overview
2. Key Features
3. Configuration Properties
4. Configuration Examples
5. API Reference

1. Overview

The DATE component provides a date picker for selecting dates with three modes: full date (day/month/year), month and year only, or year only.

🛝 Use the Dynamic Form Playground to see the Date component in action and try out different configurations

2. Key Features

Three selection modes: full date, month-year only, or year only
Customizable date formats and parsing
Non-strict parsing for flexible date entry
Configurable calendar start view and starting date
Optional calendar picker hiding for manual entry only
Translation and string interpolation support

3. Configuration Properties

Base Properties

Property	Type	Required	Description
`type`	`'DATE'`	Yes	Specifies the field type as DATE.
`id`	`string`	Yes	Unique identifier for the field. The field's value is stored in the form state under this key.
`renderName`	`string`	No	Optional name added as `data-render-name` attribute to locate the rendered element in the DOM.
`label`	`string`	Yes	Label text displayed above the field. Supports translation and string interpolation.
`hint`	`string`	No	Additional hint text displayed below the field.
`note`	`string`	No	Informational note displayed when there are no errors.
`infoIcon`	`DfInfoIconConfig`	No	Info icon with popover. Object with `popoverText` (string, required) and `popoverDirection` (`'top'`, `'bottom'`, `'left'`, `'right'`).
`validators`	`array`	No	Validation rules for the field. Common types: `REQUIRED`, `MIN_DATE` (minimum date), `MAX_DATE` (maximum date). Each validator has `type` and optional `errorMessage`. For `MIN_DATE`, use `minDate` property; for `MAX_DATE`, use `maxDate` property. Accepts RFC-3339 format (`'2024-12-25'`) or natural date strings (`'TODAY'`, `'today+2days'`, `'today-1month'`).
`testId`	`string`	No	Test identifier for automated testing. Set as `data-testid` attribute.
`acl`	`array`	No	Access control rules for field visibility/editability. Each rule has `state` (`'hidden'`, `'readonly'`, `'disabled'`, `'visible'`, `'editable'`) and optional `condition` (Filtrex expression).
`columnSpan`	`number`	No	Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width).
`spacing`	`string`	No	Margin spacing before next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Component Specific Properties

Property	Type	Required	Description
`mode`	`string`	Yes	Specifies the mode of the date input field. Determines the level of granularity for date selection: - `monthYearOnly`: Allows selection of only month and year. - `yearOnly`: Allows selection of only the year. - `fullDate`: Allows selection of the full date (day, month, year).
`displayFormat`	`string`	No	The display format for the date input. Refer the NDBX datefield documentation for details: https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield
`hideCalendarPicker`	`boolean`	No	Boolean to hide the calendar picker
`inputPrefix`	`string`	No	Prefix text to place at the start of this field's input. It's translatable by default and supports string interpolation.
`inputSuffix`	`string`	No	Suffix text to place at the end of this field's input. It's translatable by default and supports string interpolation.
`layout`	`object`	No	The layout of the field. See also Layout Properties
`nonStrictParsing`	`boolean`	No	The ndbx date picker supports a non-strict parsing. This makes it possible to enter dates without separators like / or . When the non strict parsing is active, the datepicker will also automatically format the date to what it detected.
`optionalLabel`	`string`	No	Text that is additionally displayed in the label if the field is not mandatory.
`panelClass`	`string[] \| string`	No	Classes to be passed to the date picker panel. Supports the same syntax as ngClass.
`parseFormat`	`string[] \| string`	No	The parse format for the date input. The formats are dependent on the date-adapter. Day.js formats: https://day.js.org/docs/en/parse/string-format Refer the NDBX datefield documentation for details: https://api-test.allianz.com/ngx-brand-kit-next/documentation/datefield
`placeholder`	`string`	No	Placeholder to be displayed in the field when the input is empty. It's translatable by default and supports string interpolation.
`startAt`	`string`	No	The date on which to open the calendar initially. Note that this is not the same thing as the date field's initial value, which still defaults to empty.
`startView`	`string`	No	The view that the calendar should start with. Defaults to month.

Layout Properties

Property	Type	Required	Description
`centerAlignInRetail`	`boolean`	No	Controls the field alignment for "CUSTOM_COLUMN" layout in retail journeys. Set to `true` to center-align the field. Defaults to left alignment. Ignored in expert journeys and other pre-defined layouts, which always use left alignment.

4. Configuration Examples

Basic Full Date Picker

{
  "id": "birthDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Date of Birth",
  "placeholder": "DD.MM.YYYY",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Please enter your date of birth"
    },
    {
      "type": "MAX_DATE",
      "maxDate": "TODAY",
      "errorMessage": "Birth date cannot be in the future"
    }
  ]
}

Date with Custom Parse and Display Formats

{
  "id": "appointmentDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Appointment Date",
  "parseFormat": ["DD.MM.YYYY", "DD/MM/YYYY", "DD-MM-YYYY", "YYYY-MM-DD"],
  "displayFormat": "DD.MM.YYYY",
  "startView": "month",
  "placeholder": "DD.MM.YYYY",
  "validators": [
    {
      "type": "MIN_DATE",
      "minDate": "TODAY",
      "errorMessage": "Appointment must be today or later"
    }
  ]
}

Date with Non-Strict Parsing

{
  "id": "effectiveDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Effective Date",
  "nonStrictParsing": true,
  "parseFormat": "DD.MM.YYYY",
  "displayFormat": "DD.MM.YYYY",
  "placeholder": "Enter date (e.g., 25122024)",
  "hint": "You can type the date without separators"
}

Date with Default Value and Start Date

{
  "id": "travelDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Travel Date",
  "value": "TOMORROW",
  "startAt": "TODAY",
  "startView": "month",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Travel date is required"
    }
  ]
}

Month and Year Picker

{
  "id": "expiryDate",
  "type": "DATE",
  "mode": "monthYearOnly",
  "label": "Card Expiry Date",
  "parseFormat": "MM/YYYY",
  "displayFormat": "MM/YYYY",
  "startView": "year",
  "placeholder": "MM/YYYY",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Expiry date is required"
    },
    {
      "type": "MIN_DATE",
      "minDate": "TODAY",
      "errorMessage": "Card has expired"
    }
  ]
}

Year-Only Picker

{
  "id": "graduationYear",
  "type": "DATE",
  "mode": "yearOnly",
  "label": "Year of Graduation",
  "placeholder": "YYYY",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Graduation year is required"
    },
    {
      "type": "MAX_DATE",
      "maxDate": "TODAY",
      "errorMessage": "Graduation year cannot be in the future"
    }
  ]
}

Date with Range Validation

{
  "id": "conferenceDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Conference Registration Date",
  "placeholder": "DD.MM.YYYY",
  "startAt": "2025-01-01",
  "validators": [
    {
      "type": "REQUIRED",
      "errorMessage": "Registration date is required"
    },
    {
      "type": "MIN_DATE",
      "minDate": "2025-01-01",
      "errorMessage": "Registration opens on January 1, 2025"
    },
    {
      "type": "MAX_DATE",
      "maxDate": "2025-12-31",
      "errorMessage": "Registration closes on December 31, 2025"
    }
  ]
}

Date with Default Value

{
  "id": "policyStartDate",
  "type": "DATE",
  "mode": "fullDate",
  "label": "Policy Start Date",
  "value": "TODAY",
  "nonStrictParsing": true
}

5. API Reference

For complete API documentation, see:

For Aquila component documentation and design guidelines, see Date Field - Aquila Design System.