Date Picker

用于通过类似字段的按钮打开日历，以紧凑方式选择日期。

预览

截止日期与重置

选择或清除受限范围内的截止日期，恢复初始值，并比较禁用状态。

正在加载预览。

安装

npx shadcn@latest add @neumorphism-ui/date-picker

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

截止日期与重置

npx shadcn@latest add @neumorphism-ui/date-picker @neumorphism-ui/button

Registry JSON

用法

提供标签、value 与 onValueChange。设置本地化文案、日期约束及帮助文字，并在应用中定义清空和表单重置行为。

"use client";

import { useState } from "react";
import { DatePicker } from "@/components/ui/date-picker";

export default function Example() {
  const [date, setDate] = useState<Date | undefined>();
  return <DatePicker label="Due date" name="dueDate" value={date} onValueChange={setDate} />;
}

API 参考

由父组件管理选择值。设置 name 后，以本地 YYYY-MM-DD 提交隐藏字段，避免 UTC 转换改变日期。重置也由父状态处理。

组件	属性	类型	默认值	说明
`DatePicker`	`value / onValueChange`	`Date \| undefined / callback`	`—`	当前日期和更改回调，空值为undefined。
`DatePicker`	`label / name / describedBy`	`string`	`—`	按钮名称、表单字段名和说明元素ID。
`DatePicker`	`disabledDates / startMonth / endMonth`	`Matcher \| Matcher[] / Date`	`—`	禁用日期及月份导航范围。

预览

截止日期与重置

安装

用法

API 参考

无障碍