Skip to content
Home

DateOfBirth

Info
Demos
Properties
Events

Import

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.DateOfBirth />)

Description

Field.DateOfBirth is a wrapper component for the input of strings, with user experience tailored for date of birth values.

There is a corresponding Value.DateOfBirth component.

It supports the HTML autocomplete attribute, and by default set it to bday-day for the day field, bday-month for the month field, and to bday-year for the year field.

Relevant links

Validators

Internal validators exposed

Field.DateOfBirth expose the dateOfBirthValidator validator through its onChangeValidator and onBlurValidator property, take a look at this demo. The dateOfBirthValidator validator, validates if the date provided is a valid date or not.

Extending validators

When you return the built-in validator together with custom validation logic you can introduce additional rules without losing the default checks. Import DateOfBirthValidator to type your validator and the validators object.

import { Field } from '@dnb/eufemia/extensions/forms'
import type { DateOfBirthValidator } from '@dnb/eufemia/extensions/forms/Field/DateOfBirth'


const myValidator: DateOfBirthValidator = (value, { validators }) => {
  const { dateOfBirthValidator } = validators ?? {}
  const modernBirthYear = (value: string) => {
    if (value && value.slice(0, 4) < '1900') {
      return new Error('Birth year must be 1900 or later')
    }
  }


  // Keep the default validator and add a minimum year requirement.
  return [dateOfBirthValidator, modernBirthYear]
}


render(<Field.DateOfBirth onBlurValidator={myValidator} />)