DateOfBirth

Seletor de data de nascimento com ordem flexível, estilo de mês e validação de idade.

Importar

import { DateOfBirth } from 'asterui'

Exemplos

Básico

Seletor padrão de mês/dia/ano.

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

Ordem

Troque para a ordem dia/mês/ano.

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

Grade de Meses

Grade compacta para seleção de mês.

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

Entrada de Ano

Use entrada numérica do ano e regras de idade.

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

Controlado

Controle o valor via estado local.

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

Formulário

Integração com Form e envio do valor.

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`

Propriedade	Descrição	Tipo	Padrão
`value`	Valor controlado	`{ month?: string; day?: string; year?: string }`	-
`defaultValue`	Valor padrão	`{ month?: string; day?: string; year?: string }`	-
`onChange`	Manipulador de mudança	`(value) => void`	-
`order`	Ordem dos campos	`'mdy' \| 'dmy' \| 'ymd'`	`'mdy'`
`monthStyle`	Estilo do mês	`'select' \| 'grid'`	`'select'`
`yearStyle`	Estilo do ano	`'select' \| 'input'`	`'select'`
`yearSpan`	Quantidade de anos	`number`	`120`
`minAge`	Idade mínima permitida	`number`	`13`
`maxAge`	Idade máxima permitida	`number`	-
`monthPlaceholder`	Placeholder do mês	`string`	`'Month'`
`dayPlaceholder`	Placeholder do dia	`string`	`'Day'`
`yearPlaceholder`	Placeholder do ano	`string`	`'Year'`
`disabled`	Desativar o campo	`boolean`	`false`
`size`	Tamanho do componente	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`className`	Classes CSS adicionais	`string`	-
`data-testid`	Prefixo de ID de teste	`string`	-