DateOfBirth

Sélecteur de date de naissance avec ordre flexible, style du mois et validation d’âge.

Importer

import { DateOfBirth } from 'asterui'

Exemples

Basique

Sélecteur par défaut mois/jour/année.

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

Ordre

Basculer vers l'ordre jour/mois/année.

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

Grille de Mois

Grille compacte pour sélectionner le mois.

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

Saisie de l'Année

Utiliser un champ numérique et des règles d'âge.

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

Contrôlé

Contrôler la valeur via l'état 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

Formulaire

Intégration avec Form et envoi de la valeur.

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`

Propriété	Description	Type	Par défaut
`value`	Valeur contrôlée	`{ month?: string; day?: string; year?: string }`	-
`defaultValue`	Valeur par défaut	`{ month?: string; day?: string; year?: string }`	-
`onChange`	Gestionnaire de changement	`(value) => void`	-
`order`	Ordre des champs	`'mdy' \| 'dmy' \| 'ymd'`	`'mdy'`
`monthStyle`	Style du mois	`'select' \| 'grid'`	`'select'`
`yearStyle`	Style de l’année	`'select' \| 'input'`	`'select'`
`yearSpan`	Nombre d’années	`number`	`120`
`minAge`	Âge minimum autorisé	`number`	`13`
`maxAge`	Âge maximum autorisé	`number`	-
`monthPlaceholder`	Placeholder du mois	`string`	`'Month'`
`dayPlaceholder`	Placeholder du jour	`string`	`'Day'`
`yearPlaceholder`	Placeholder de l’année	`string`	`'Year'`
`disabled`	Désactiver le champ	`boolean`	`false`
`size`	Taille du composant	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	Préfixe d’ID de test	`string`	-