DatePicker

Componente de selección de fecha con ventana emergente de calendario.

Importar

import { DatePicker } from 'asterui'

Ejemplos

DatePicker Básico

Selección simple de fecha.

</>

import { DatePicker } from 'asterui'

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

export default App

Controlado

Selector de fecha controlado con manejador 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

Valor Predeterminado

Selector de fecha con valor inicial.

</>

import { DatePicker } from 'asterui'

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

export default App

Formatos de Fecha

Diferentes cadenas de formato de visualización.

</>

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

Fechas Deshabilitadas

Deshabilita fechas específicas con 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

Rango de Fechas

Selecciona una fecha de inicio y fin.

</>

import { DatePicker } from 'asterui'

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

export default App

Tamaños

Diferentes tamaños de entrada.

</>

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

Deshabilitado

Selector de fecha deshabilitado.

</>

import { DatePicker } from 'asterui'

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

export default App

API

DatePicker

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de fecha controlado	Date | null	-
defaultValue	Valor de fecha inicial	Date | null	-
onChange	Manejador de cambio	(date: Date | null) => void	-
format	Cadena de formato de visualización	string	'MM/DD/YYYY'
placeholder	Marcador de posición de entrada	string	'Seleccionar fecha'
disabledDate	Deshabilitar fechas específicas	(date: Date) => boolean	-
disabled	Deshabilitar el selector	boolean	false
size	Tamaño de entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de prueba para pruebas	string	-
className	Clases CSS adicionales	string	-

DatePicker.Range

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de rango de fechas controlado	[Date | null, Date | null]	-
defaultValue	Valor de rango de fechas inicial	[Date | null, Date | null]	-
onChange	Manejador de cambio	(range: [Date | null, Date | null]) => void	-
format	Cadena de formato de visualización	string	'MM/DD/YYYY'
placeholder	Marcadores de posición de entrada	[string, string] | string	['Fecha de inicio', 'Fecha de fin']
disabledDate	Deshabilitar fechas específicas	(date: Date) => boolean	-
disabled	Deshabilitar el selector	boolean	false
size	Tamaño de entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de prueba para pruebas	string	-
className	Clases CSS adicionales	string	-