DatePicker

显示日期的胶囊;日历使用圆形日期,今天带描边,并提供可输入 ISO 日期的字段。

查看源码
import { DatePicker, DateRangePicker, Calendar, TimeInput } from "@logicplanes/kaeso-ui";

属性

  • aria-label
    string

    没有 label 时为触发器命名:“过期时间”。它显示的内容(日期或占位符)成为其描述。

  • aria-labelledby
    string

    用这些 ID 对应的元素为触发器命名,作用同 aria-label。

  • defaultValue
    Date | null

    首次渲染时的所选日期。

  • description
    ReactNode

    标签下方的一句帮助文字。

  • disabled
    boolean

    将其禁用:无法使用,并显示为变暗。

  • disabledDays
    ((date: Date) => boolean)

    对无法选择的日期返回 true。

  • id
    string

    控件的 ID,便于其他位置的标签指向它。

  • label
    ReactNode

    可见标签。

  • layout
    "horizontal" | "vertical"

    标签位于控件上方(vertical)或旁边(horizontal)。

  • onValueChange
    ((value: Date | null) => void)

    调用时传入所选日期,清除时传入 null。

  • optional
    boolean

    在标签后加上“可选”,用于大多数字段为必填的表单。

  • placeholder
    string

    未选择日期时显示。默认为 LocaleProvider 语言中的“选择日期”(范围时为“选择范围”)。

  • required
    boolean

    在表单中将其标记为必填。

  • size
    "md" | "sm" | "lg"

    字段的高度。

  • value
    Date | null

    受控时的所选日期。

  • weekStartsOn
    0 | 4 | 1 | 2 | 3 | 5 | 6

    一周的第一天,从 0(星期日)到 6(星期六);默认由语言决定。