DateOfBirth

出生日期选择器，支持顺序、月份样式与年龄校验。

导入

import { DateOfBirth } from 'asterui'

示例

基础

默认的月/日/年选择器。

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

顺序

切换为日/月/年顺序。

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 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 + 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 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 集成并提交结果。

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`

属性	说明	类型	默认值
`value`	受控值	`{ month?: string; day?: string; year?: string }`	-
`defaultValue`	默认值	`{ month?: string; day?: string; year?: string }`	-
`onChange`	变更回调	`(value) => void`	-
`order`	字段顺序	`'mdy' \| 'dmy' \| 'ymd'`	`'mdy'`
`monthStyle`	月份样式	`'select' \| 'grid'`	`'select'`
`yearStyle`	年份样式	`'select' \| 'input'`	`'select'`
`yearSpan`	年份范围	`number`	`120`
`minAge`	最小年龄	`number`	`13`
`maxAge`	最大年龄	`number`	-
`monthPlaceholder`	月份占位符	`string`	`'Month'`
`dayPlaceholder`	日期占位符	`string`	`'Day'`
`yearPlaceholder`	年份占位符	`string`	`'Year'`
`disabled`	禁用	`boolean`	`false`
`size`	组件尺寸	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`className`	额外 CSS 类	`string`	-
`data-testid`	测试 ID 前缀	`string`	-