DateOfBirth

Selector de fecha de nacimiento con orden flexible, estilo de mes y validación de edad.

Importar

import { DateOfBirth } from 'asterui'

Ejemplos

Básico

Selector predeterminado de mes/día/año.

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

Orden

Cambiar al orden día/mes/año.

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

Cuadrícula de Meses

Cuadrícula compacta para seleccionar el mes.

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 Año

Usa un campo numérico para el año y reglas de edad.

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

Controla el valor mediante 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

Formulario

Integración con Form y envío del 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`

Propiedad	Descripción	Tipo	Predeterminado
`value`	Valor controlado	`{ month?: string; day?: string; year?: string }`	-
`defaultValue`	Valor predeterminado	`{ month?: string; day?: string; year?: string }`	-
`onChange`	Manejador de cambio	`(value) => void`	-
`order`	Orden de campos	`'mdy' \| 'dmy' \| 'ymd'`	`'mdy'`
`monthStyle`	Estilo del mes	`'select' \| 'grid'`	`'select'`
`yearStyle`	Estilo del año	`'select' \| 'input'`	`'select'`
`yearSpan`	Cantidad de años	`number`	`120`
`minAge`	Edad mínima permitida	`number`	`13`
`maxAge`	Edad máxima permitida	`number`	-
`monthPlaceholder`	Placeholder del mes	`string`	`'Month'`
`dayPlaceholder`	Placeholder del día	`string`	`'Day'`
`yearPlaceholder`	Placeholder del año	`string`	`'Year'`
`disabled`	Deshabilitar el campo	`boolean`	`false`
`size`	Tamaño del componente	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`className`	Clases CSS adicionales	`string`	-
`data-testid`	Prefijo de ID de prueba	`string`	-