DatePicker

Composant de sélection de date avec popup de calendrier.

Import

import { DatePicker } from 'asterui'

Exemples

DatePicker de base

Sélection de date simple.

</>

import { DatePicker } from 'asterui'

function App() {
  return (
      <DatePicker placeholder="Select date" />
    )
}

export default App

Contrôlé

Sélecteur de date contrôlé avec gestionnaire onChange.

</>

Selected: None

import { DatePicker, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [date, setDate] = useState<Date | null>(null)
  
  return (
      <Space direction="vertical" size="sm">
        <DatePicker
          value={date}
          onChange={setDate}
          placeholder="Select date"
        />
        <p className="text-sm text-base-content/70">
          Selected: {date ? date.toLocaleDateString() : 'None'}
        </p>
      </Space>
    )
}

export default App

Valeur par défaut

Sélecteur de date avec valeur initiale.

</>

import { DatePicker } from 'asterui'

function App() {
  return (
      <DatePicker
        defaultValue={new Date()}
        placeholder="Select date"
      />
    )
}

export default App

Formats de date

Différentes chaînes de format d'affichage.

</>

import { DatePicker, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <DatePicker placeholder="MM/DD/YYYY (default)" format="MM/DD/YYYY" />
        <DatePicker placeholder="DD/MM/YYYY" format="DD/MM/YYYY" />
        <DatePicker placeholder="YYYY-MM-DD" format="YYYY-MM-DD" />
      </Space>
    )
}

export default App

Dates désactivées

Désactivez des dates spécifiques avec un callback.

</>

import { DatePicker, Space } from 'asterui'

function App() {
  const disablePastDates = (date: Date) => date < new Date(new Date().setHours(0, 0, 0, 0))
  
  return (
      <Space direction="vertical" size="sm">
        <DatePicker placeholder="Disable past dates" disabledDate={disablePastDates} />
        <DatePicker.Range placeholder={['Start date', 'End date']} disabledDate={disablePastDates} />
      </Space>
    )
}

export default App

Plage de dates

Sélectionnez une date de début et de fin.

</>

import { DatePicker } from 'asterui'

function App() {
  return (
      <DatePicker.Range
        placeholder={['Start date', 'End date']}
      />
    )
}

export default App

Tailles

Différentes tailles d'entrée.

</>

import { DatePicker, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <DatePicker size="xs" placeholder="Extra small" />
        <DatePicker size="sm" placeholder="Small" />
        <DatePicker size="md" placeholder="Medium" />
        <DatePicker size="lg" placeholder="Large" />
      </Space>
    )
}

export default App

Désactivé

Sélecteur de date désactivé.

</>

import { DatePicker } from 'asterui'

function App() {
  return (
      <DatePicker disabled placeholder="Disabled" />
    )
}

export default App

API

DatePicker

Propriété	Description	Type	Défaut
value	Valeur de date contrôlée	Date | null	-
defaultValue	Valeur de date initiale	Date | null	-
onChange	Gestionnaire de changement	(date: Date | null) => void	-
format	Chaîne de format d’affichage	string	'MM/DD/YYYY'
placeholder	Espace réservé d’entrée	string	'Sélectionner une date'
disabledDate	Désactiver des dates spécifiques	(date: Date) => boolean	-
disabled	Désactiver le sélecteur	boolean	false
size	Taille d’entrée	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de test pour les tests	string	-
className	Classes CSS supplémentaires	string	-

DatePicker.Range

Propriété	Description	Type	Défaut
value	Valeur de plage de dates contrôlée	[Date | null, Date | null]	-
defaultValue	Valeur de plage de dates initiale	[Date | null, Date | null]	-
onChange	Gestionnaire de changement	(range: [Date | null, Date | null]) => void	-
format	Chaîne de format d’affichage	string	'MM/DD/YYYY'
placeholder	Espaces réservés de l’entrée	[string, string] | string	['Date de début', 'Date de fin']
disabledDate	Désactiver des dates spécifiques	(date: Date) => boolean	-
disabled	Désactiver le sélecteur	boolean	false
size	Taille d’entrée	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de test pour les tests	string	-
className	Classes CSS supplémentaires	string	-