DatePicker

带日历弹窗的日期选择组件。

导入

import { DatePicker } from 'asterui'

示例

基础日期选择器

简单的日期选择。

</>

import { DatePicker } from 'asterui'

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

export default App

受控模式

带 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

默认值

带初始值的日期选择器。

</>

import { DatePicker } from 'asterui'

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

export default App

日期格式

不同的显示格式字符串。

</>

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

禁用日期

使用回调禁用指定日期。

</>

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

日期范围

选择开始和结束日期。

</>

import { DatePicker } from 'asterui'

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

export default App

尺寸

不同的输入框尺寸。

</>

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

禁用

禁用的日期选择器。

</>

import { DatePicker } from 'asterui'

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

export default App

API

DatePicker

属性	描述	类型	默认值
value	受控日期值	Date | null	-
defaultValue	初始日期值	Date | null	-
onChange	变化处理器	(date: Date | null) => void	-
format	显示格式字符串	string	'MM/DD/YYYY'
placeholder	输入框占位符	string	'选择日期'
disabledDate	禁用指定日期	(date: Date) => boolean	-
disabled	禁用选择器	boolean	false
size	输入框尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	用于测试的测试 ID	string	-
className	额外的 CSS 类名	string	-

DatePicker.Range

属性	描述	类型	默认值
value	受控日期范围值	[Date | null, Date | null]	-
defaultValue	初始日期范围值	[Date | null, Date | null]	-
onChange	变化处理器	(range: [Date | null, Date | null]) => void	-
format	显示格式字符串	string	'MM/DD/YYYY'
placeholder	输入框占位符	[string, string] | string	['开始日期', '结束日期']
disabledDate	禁用指定日期	(date: Date) => boolean	-
disabled	禁用选择器	boolean	false
size	输入框尺寸	'xs' | 'sm' | 'md' | 'lg' | 'xl'	componentSize
data-testid	用于测试的测试 ID	string	-
className	额外的 CSS 类名	string	-