Date Picker

<afp-date-picker>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A date picker component for selecting dates via input or calendar popup.

The Calendar will be displayed based on the chosen language and this will affect all the following examples.

<afp-date-picker></afp-date-picker>

<afp-date-picker></afp-date-picker>

<AfpDatePicker></AfpDatePicker>

<AfpDatePicker></AfpDatePicker>

Examples #

Shape #

Use the shape attribute to change a date-picker's shape.

<div class="afp-stack">
  <afp-date-picker shape="pill" label="Pill"></afp-date-picker>
  <afp-date-picker shape="rounded" label="Rounded"></afp-date-picker>
  <afp-date-picker shape="soft" label="Soft"></afp-date-picker>
  <afp-date-picker shape="square" label="Square"></afp-date-picker>
</div>

<div class="afp-stack">
  <afp-date-picker [shape]="'pill'" [label]="'Pill'"></afp-date-picker>
  <afp-date-picker [shape]="'rounded'" [label]="'Rounded'"></afp-date-picker>
  <afp-date-picker [shape]="'soft'" [label]="'Soft'"></afp-date-picker>
  <afp-date-picker [shape]="'square'" [label]="'Square'"></afp-date-picker>
</div>

<div class="afp-stack">
  <AfpDatePicker shape="pill" label="Pill"></AfpDatePicker>
  <AfpDatePicker shape="rounded" label="Rounded"></AfpDatePicker>
  <AfpDatePicker shape="soft" label="Soft"></AfpDatePicker>
  <AfpDatePicker shape="square" label="Square"></AfpDatePicker>
</div>

<div class="afp-stack">
  <AfpDatePicker :shape="'pill'" :label="'Pill'"></AfpDatePicker>
  <AfpDatePicker :shape="'rounded'" :label="'Rounded'"></AfpDatePicker>
  <AfpDatePicker :shape="'soft'" :label="'Soft'"></AfpDatePicker>
  <AfpDatePicker :shape="'square'" :label="'Square'"></AfpDatePicker>
</div>

Sizes #

Use the size attribute to change a date-picker's size.

<div class="afp-cluster">
  <afp-date-picker label="Small" placeholder="DD.MM.YYYY" size="small"></afp-date-picker>
  <afp-date-picker label="Medium" placeholder="DD.MM.YYYY" size="medium"></afp-date-picker>
  <afp-date-picker label="Large" placeholder="DD.MM.YYYY" size="large"></afp-date-picker>
</div>

<div class="afp-cluster">
  <afp-date-picker [label]="'Small'" [placeholder]="'DD.MM.YYYY'" [size]="'small'"></afp-date-picker>
  <afp-date-picker [label]="'Medium'" [placeholder]="'DD.MM.YYYY'" [size]="'medium'"></afp-date-picker>
  <afp-date-picker [label]="'Large'" [placeholder]="'DD.MM.YYYY'" [size]="'large'"></afp-date-picker>
</div>

<div class="afp-cluster">
  <AfpDatePicker label="Small" placeholder="DD.MM.YYYY" size="small"></AfpDatePicker>
  <AfpDatePicker label="Medium" placeholder="DD.MM.YYYY" size="medium"></AfpDatePicker>
  <AfpDatePicker label="Large" placeholder="DD.MM.YYYY" size="large"></AfpDatePicker>
</div>

<div class="afp-cluster">
  <AfpDatePicker :label="'Small'" :placeholder="'DD.MM.YYYY'" :size="'small'"></AfpDatePicker>
  <AfpDatePicker :label="'Medium'" :placeholder="'DD.MM.YYYY'" :size="'medium'"></AfpDatePicker>
  <AfpDatePicker :label="'Large'" :placeholder="'DD.MM.YYYY'" :size="'large'"></AfpDatePicker>
</div>

Hint #

Use the hint attribute to provide additional information below the date picker field.

<afp-date-picker 
  label="Date of Birth"
  placeholder="DD.MM.YYYY"
  hint="Select date of birth before 01.12.2025"
  max="2025-12-01"
></afp-date-picker>

<afp-date-picker 
  [label]="'Date of Birth'"
  [placeholder]="'DD.MM.YYYY'"
  [hint]="'Select date of birth before 01.12.2025'"
  [max]="'2025-12-01'"
></afp-date-picker>

<AfpDatePicker 
  label="Date of Birth"
  placeholder="DD.MM.YYYY"
  hint="Select date of birth before 01.12.2025"
  max="2025-12-01"
></AfpDatePicker>

<AfpDatePicker 
  :label="'Date of Birth'"
  :placeholder="'DD.MM.YYYY'"
  :hint="'Select date of birth before 01.12.2025'"
  :max="'2025-12-01'"
></AfpDatePicker>

Minimum date #

Use the min attribute to set the date of Birth anything after 01.10.2025

<afp-date-picker label="Date of Birth after 01.10.2025" min="2025-10-01"></afp-date-picker>

<afp-date-picker [label]="'Date of Birth after 01.10.2025'" [min]="'2025-10-01'"></afp-date-picker>

<AfpDatePicker label="Date of Birth after 01.10.2025" min="2025-10-01"></AfpDatePicker>

<AfpDatePicker :label="'Date of Birth after 01.10.2025'" :min="'2025-10-01'"></AfpDatePicker>

Maximum date #

Use the max attribute to set the date of Birth anything before today

<afp-date-picker id="dob" label="Date of Birth before today"></afp-date-picker>

<script>
  (function () {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    const max = `${yyyy}-${mm}-${dd}`;
  
    const el = document.getElementById('dob');
    if (el) el.setAttribute('max', max);
  })();
</script>

<afp-date-picker [id]="'dob'" [label]="'Date of Birth before today'"></afp-date-picker>

<script>
  (function () {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    const max = `${yyyy}-${mm}-${dd}`;
  
    const el = document.getElementById('dob');
    if (el) el.setAttribute('max', max);
  })();
</script>

<AfpDatePicker id="dob" label="Date of Birth before today"></AfpDatePicker>

<script>
  (function () {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    const max = `${yyyy}-${mm}-${dd}`;
  
    const el = document.getElementById('dob');
    if (el) el.setAttribute('max', max);
  })();
</script>

<AfpDatePicker :id="'dob'" :label="'Date of Birth before today'"></AfpDatePicker>

<script>
  (function () {
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    const max = `${yyyy}-${mm}-${dd}`;
  
    const el = document.getElementById('dob');
    if (el) el.setAttribute('max', max);
  })();
</script>

Value #

Use the value attribute to set the selected date

<afp-date-picker label="Date of Birth"  value="1990-10-30"></afp-date-picker>

<afp-date-picker [label]="'Date of Birth'"  [value]="'1990-10-30'"></afp-date-picker>

<AfpDatePicker label="Date of Birth"  value="1990-10-30"></AfpDatePicker>

<AfpDatePicker :label="'Date of Birth'"  :value="'1990-10-30'"></AfpDatePicker>

Disabled #

Use the disabled attribute specifies whether the date-picker is disabled.

<afp-date-picker label="Date of Birth" disabled></afp-date-picker>

<afp-date-picker [label]="'Date of Birth'" disabled></afp-date-picker>

<AfpDatePicker label="Date of Birth" disabled></AfpDatePicker>

<AfpDatePicker :label="'Date of Birth'" disabled></AfpDatePicker>

Invalid #

Use the invalid attribute specifies the error message.

<afp-date-picker label="Date of Birth" invalid="Please enter the date of birth" required></afp-date-picker>

<afp-date-picker [label]="'Date of Birth'" [invalid]="'Please enter the date of birth'" required></afp-date-picker>

<AfpDatePicker label="Date of Birth" invalid="Please enter the date of birth" required></AfpDatePicker>

<AfpDatePicker :label="'Date of Birth'" :invalid="'Please enter the date of birth'" required></AfpDatePicker>

Properties

Learn more about properties.

Name Description Reflects

value

The selected date value in YYYY-MM-DD format

Type string

Default ''

label

Label for the date picker

Type string

Default ''

placeholder

Placeholder text for the date picker input

Type string

Default ''

disabled

Whether the date picker is disabled

Type boolean

Default false

required

Whether the date picker is required

Type boolean

Default false

readonly

Whether the date picker is readonly

Type boolean

Default false

autocomplete

Native autocomplete attribute for the input field. E.g. "on", "off", "bday", "bday-day", etc.

Type string

Default 'off'

size

Size of the date picker

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

shape

Shape of the date picker

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

strategy

Positioning strategy for the date picker panel. Either `absolute` or `fixed`.

Type

AfpStrategy

Name	Description
`ABSOLUTE`	Positioning using absolute positioning.
`FIXED`	Positioning using fixed positioning.

AfpStrategy

Default AfpStrategy.FIXED

min

Minimum selectable date ( YYYY-MM-DD format)

Type string

Default ''

max

Maximum selectable date ( YYYY-MM-DD format)

Type string

Default ''

hint

Hint message displayed below the input

Type string

Default ''

invalid

Invalid error message

Type string

Default ''

name

Name attribute for form submission

Type string

Default ''

ariaLabel
arialabel

Aria label for the date picker field. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`string \| null`	Emitted when the date value changes.
`afp-input`	`string \| null`	Emitted on input changes with the current input value.
`afp-focus`	`void`	Emitted when the input gains focus.
`afp-blur`	`void`	Emitted when the input loses focus.

Slots

Learn more about slots.

Name	Description
`label`	Slot for adding custom label content.
`calendar-icon`	Slot for custom calendar icon.
`chevron-left-icon`	Slot for custom left chevron icon in calendar navigation.
`chevron-right-icon`	Slot for custom right chevron icon in calendar navigation.

Internationalization

Learn more about internationalization.

Key	Description
`date-picker.weekday.sun`	Abbreviation for Sunday in the calendar header.
`date-picker.weekday.mon`	Abbreviation for Monday in the calendar header.
`date-picker.weekday.tue`	Abbreviation for Tuesday in the calendar header.
`date-picker.weekday.wed`	Abbreviation for Wednesday in the calendar header.
`date-picker.weekday.thu`	Abbreviation for Thursday in the calendar header.
`date-picker.weekday.fri`	Abbreviation for Friday in the calendar header.
`date-picker.weekday.sat`	Abbreviation for Saturday in the calendar header.
`date-picker.month.january`	Month name January.
`date-picker.month.february`	Month name February.
`date-picker.month.march`	Month name March.
`date-picker.month.april`	Month name April.
`date-picker.month.may`	Month name May.
`date-picker.month.june`	Month name June.
`date-picker.month.july`	Month name July.
`date-picker.month.august`	Month name August.
`date-picker.month.september`	Month name September.
`date-picker.month.october`	Month name October.
`date-picker.month.november`	Month name November.
`date-picker.month.december`	Month name December.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`label`	The label element.	`::part(label)`
`label-base`	The base container for the label.	`::part(label-base)`
`field`	The input field container.	`::part(field)`
`input`	The text input element.	`::part(input)`
`calendar-button`	The calendar icon button.	`::part(calendar-button)`
`calendar`	The calendar popup container.	`::part(calendar)`
`calendar-header`	The calendar month/year header.	`::part(calendar-header)`
`calendar-nav`	The calendar navigation buttons container.	`::part(calendar-nav)`
`calendar-grid`	The calendar days grid.	`::part(calendar-grid)`
`day-cell`	Individual day cell.	`::part(day-cell)`
`disabled`	The part for disabled state.	`::part(disabled)`
`hint-base`	The base container for hint message.	`::part(hint-base)`
`hint`	The hint message.	`::part(hint)`
`invalid-base`	The base container for invalid message.	`::part(invalid-base)`
`invalid`	The invalid message.	`::part(invalid)`
`month-select`	The month dropdown select element.	`::part(month-select)`
`year-select`	The year dropdown select element.	`::part(year-select)`
`calendar-selects`	Wrapper around month and year selects.	`::part(calendar-selects)`
`weekdays`	Container for weekday headers.	`::part(weekdays)`
`weekday`	Individual weekday header cell.	`::part(weekday)`
`week`	A single calendar week row.	`::part(week)`
`day-empty`	Empty placeholder cell for days outside the current month.	`::part(day-empty)`
`footer`	Footer container for hint and invalid messages.	`::part(footer)`

CSS Custom Properties

Name	Description	Default
`--afp-input-label-disabled-opacity`	The opacity of the label when disabled.	`0.5`
`--afp-input-field-disabled-opacity`	The opacity of the field when disabled.	`0.5`
`--afp-calendar-icon-disabled-opacity`	The opacity of the calendar icon when disabled.	`0.5`
`--afp-input-error-message-color`	The color of the error message in the invalid state.	`--afp-color-error`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-popover	`popover` - The popover component.
afp-icon	`icon` - The icon component.
afp-button	`calendar-button` - The calendar icon button.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/date-picker/date-picker.js';