DatePicker

Componente de seleção de data com popup de calendário.

Importação

import { DatePicker } from 'asterui'

Exemplos

DatePicker Básico

Seleção simples de data.

</>

import { DatePicker } from 'asterui'

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

export default App

Controlado

Seletor de data controlado com manipulador 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 Padrão

Seletor de data com valor inicial.

</>

import { DatePicker } from 'asterui'

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

export default App

Formatos de Data

Diferentes formatos de exibição de data.

</>

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

Datas Desabilitadas

Desabilite datas específicas com um 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

Intervalo de Datas

Selecione uma data de início e fim.

</>

import { DatePicker } from 'asterui'

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

export default App

Tamanhos

Diferentes tamanhos 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

Desabilitado

Seletor de data desabilitado.

</>

import { DatePicker } from 'asterui'

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

export default App

API

DatePicker

Propriedade	Descrição	Tipo	Padrão
value	Valor de data controlado	Date | null	-
defaultValue	Valor de data inicial	Date | null	-
onChange	Manipulador de mudança	(date: Date | null) => void	-
format	String de formato de exibição	string	'MM/DD/YYYY'
placeholder	Placeholder do campo de entrada	string	'Selecionar data'
disabledDate	Desabilitar datas específicas	(date: Date) => boolean	-
disabled	Desabilitar o seletor	boolean	false
size	Tamanho do campo de entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de teste para testes	string	-
className	Classes CSS adicionais	string	-

DatePicker.Range

Propriedade	Descrição	Tipo	Padrão
value	Valor de intervalo de datas controlado	[Date | null, Date | null]	-
defaultValue	Valor de intervalo de datas inicial	[Date | null, Date | null]	-
onChange	Manipulador de mudança	(range: [Date | null, Date | null]) => void	-
format	String de formato de exibição	string	'MM/DD/YYYY'
placeholder	Placeholders do campo de entrada	[string, string] | string	['Data de início', 'Data de fim']
disabledDate	Desabilitar datas específicas	(date: Date) => boolean	-
disabled	Desabilitar o seletor	boolean	false
size	Tamanho do campo de entrada	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	ID de teste para testes	string	-
className	Classes CSS adicionais	string	-