Skip to content
Home

DateOfBirth

Info
Demos
Properties
Events

Events

Field-specific events

PropertyTypeDescription
onChange(value?: string, additionalArgs?: { day?: string, month?: string, year?: string }) => void(optional) Callback on day, month, and year change.
onDayChange(value?: string) => void(optional) Callback on day change.
onMonthChange(value?: string) => void(optional) Callback on month change.
onYearChange(value?: string) => void(optional) Callback on year change.

General events

PropertyTypeDescription
onChange(value?: string, additionalArgs: object) => void(optional) Will be called on value changes made by the user, with the new value as argument. When an async function is used, the corresponding FieldBlock will show an indicator on the field label. You can return { success: 'saved' } as const to show a success symbol, or an error or an object with these keys { info: 'Info message', warning: 'Warning message', error: Error('My error') } as const. The second parameter is an object that e.g. contains props (all given Field.* properties).
onFocus(value?: string, additionalArgs: object) => void(optional) Will be called when the component gets into focus. Like clicking inside a text input or opening a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains props (all given Field.* properties).
onBlur(value?: string, additionalArgs: object) => void(optional) Will be called when the component stop being in focus. Like when going to next field, or closing a dropdown. Called with active value as argument. The second parameter is an object that e.g. contains props (all given Field.* properties).

Details about general events arguments

The first argument value returned by the event handlers is a string where the day, month, and year is separated by a /, e.g. 24/01/2024.

The DateOfBirth field also has an extra second parameter that includes additional information about the day, month, and year. This is an object with the following properties:

render(
  <Field.DateOfBirth
    onChange={(
      value: string | undefined, // e.g. "24/01/2024"
      additionalArgs?: {
        day: string | undefined // e.g. "24"
        month: string // e.g. "01"
        year: string // e.g. "2024"
      },
    ) => {}}
  />,
)