日期控件 DatePicker
一个封装了弹出式日历选择器的 React 日期选择的 受控组件，基于 shadcn/ui、date-fns 和自定义样式构建。
📦 引入方式
import { DatePicker } from '@npmqg/react-ui-datepicker';
🚀 使用示例
📚 基本使用
- 示例
- 源码
Loading...
export default function DemoDatePicker() {
const [selectedDate, setSelectedDate] = useState();
return <DatePicker value={selectedDate} onChange={setSelectedDate} />;
}
📚 自定义显示内容
- 示例
- 源码
Loading...
<DatePicker value={new Date()} renderValue={(date) => <span>{date ? date.toDateString() : '请选择日期'}</span>} />
📚 启用时间选择
- 示例
- 源码
Loading...
<DatePicker showTime />
📚 显示清除按钮
- 示例
- 源码
Loading...
<DatePicker value="2021-11-11 11:11:11" showClear />
📚 自定义格式
- 示例
- 源码
Loading...
<DatePicker format="yyyy/MM/dd HH:mm:ss" showTime />
🧩 Props
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
id | string | - | 输入框的 id |
value | Date | string | undefined | undefined | 当前选中的日期（受控模式） |
onChange | (date?: string) => void | undefined | 日期变化时触发的回调 |
showTime | boolean | false | 是否显示时间选择器 |
showClear | boolean | false | 是否显示清除按钮 |
format | string | 'yyyy-MM-dd' 或 'yyyy-MM-dd HH:mm:ss' | 日期格式化字符串 |
className | string | '' | 自定义外层容器样式类名 |
✨ 功能
- 支持 受控 与 非受控 模式
- 日期 + 时间选择
- 一键 清空 和 选择此刻
- 使用
Popover弹出Calendar - 基于
date-fns格式化和解析日期
📐 样式
- 输入框高度：
40px - 时间下拉框宽度：
80px - 清除按钮悬浮时显示，位于右侧
🧱 依赖组件
ButtonPopover,PopoverTrigger,PopoverContentCalendarcn（合并类名函数）
🛠️ 工具函数
setFormatFunc(date: Date)：将日期对象格式化为字符 串setPauseFunc(value: string | Date)：解析字符串或日期为Date对象