DateOfBirth

Date of birth selector with flexible ordering, month presentation, and age validation.

Import

import { DateOfBirth } from 'asterui'

Examples

Basic

Default month/day/year selector.

Default (MDY, 120 years)

import { DateOfBirth, Card, Space, Typography } from 'asterui'

function App() {
  return (
      <Card>
        <Space direction="vertical" size="sm">
          <Text type="secondary">Default (MDY, 120 years)</Text>
          <DateOfBirth />
        </Space>
      </Card>
    )
}

export default App

Order

Switch to day/month/year order.

DD/MM/YYYY order

import { DateOfBirth, Card, Space, Typography } from 'asterui'

function App() {
  return (
      <Card className="w-full max-w-xl">
        <Space direction="vertical" size="sm">
          <Text type="secondary">DD/MM/YYYY order</Text>
          <DateOfBirth order="dmy" />
        </Space>
      </Card>
    )
}

export default App

Month Grid

Compact grid for month selection.

Month grid + compact day/year

import { DateOfBirth, Card, Space, Typography } from 'asterui'

function App() {
  return (
      <Card className="w-full max-w-xl">
        <Space direction="vertical" size="sm">
          <Text type="secondary">Month grid + compact day/year</Text>
          <DateOfBirth monthStyle="grid" yearStyle="select" />
        </Space>
      </Card>
    )
}

export default App

Year Input

Use a numeric year input and custom age rules.

Year input + custom age rules

import { DateOfBirth, Card, Space, Typography } from 'asterui'

function App() {
  return (
      <Card className="w-full max-w-xl">
        <Space direction="vertical" size="sm">
          <Text type="secondary">Year input + custom age rules</Text>
          <DateOfBirth yearStyle="input" minAge={18} yearSpan={90} />
        </Space>
      </Card>
    )
}

export default App

Controlled

Control the value via local state.

Controlled value

{"month":"1","day":"15","year":"1995"}

import { DateOfBirth, Card, Space, Typography } from 'asterui'

function App() {
  const [value, setValue] = useState({ month: '1', day: '15', year: '1995' })
  
  return (
      <Card className="w-full max-w-xl">
        <Space direction="vertical" size="sm">
          <Text type="secondary">Controlled value</Text>
          <DateOfBirth value={value} onChange={setValue} />
          <Text type="secondary" className="text-xs">
            {JSON.stringify(value)}
          </Text>
        </Space>
      </Card>
    )
}

export default App

Form

Integrate with Form and submit the value.

Form integration

import { DateOfBirth, Card, Space, Typography, Form, Button, Modal } from 'asterui'

function App() {
  return (
      <Card className="w-full max-w-xl">
        <Space direction="vertical" size="sm">
          <Text type="secondary">Form integration</Text>
          <Form
            form={form}
            onFinish={handleFinish}
          >
            <Form.Item
              name="dob"
              {...DateOfBirth.required()}
            >
              <DateOfBirth />
            </Form.Item>
            <Button htmlType="submit">Submit</Button>
          </Form>
        </Space>
      </Card>
    )
}

export default App

API

`DateOfBirth`

Property	Description	Type	Default
`value`	Controlled value	`{ month?: string; day?: string; year?: string }`	-
`defaultValue`	Default value	`{ month?: string; day?: string; year?: string }`	-
`onChange`	Change handler	`(value) => void`	-
`order`	Field order	`'mdy' \| 'dmy' \| 'ymd'`	`'mdy'`
`monthStyle`	Month UI style	`'select' \| 'grid'`	`'select'`
`yearStyle`	Year input style	`'select' \| 'input'`	`'select'`
`yearSpan`	Number of years to show	`number`	`120`
`minAge`	Minimum allowed age	`number`	`13`
`maxAge`	Maximum allowed age	`number`	-
`monthPlaceholder`	Placeholder for month	`string`	`'Month'`
`dayPlaceholder`	Placeholder for day	`string`	`'Day'`
`yearPlaceholder`	Placeholder for year	`string`	`'Year'`
`disabled`	Disable the field	`boolean`	`false`
`size`	Component size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`className`	Additional CSS classes	`string`	-
`data-testid`	Test ID prefix	`string`	-