日期控件 DatePicker

一个封装了弹出式日历选择器的 React 日期选择组件，基于 shadcn/ui、date-fns 和自定义样式构建。

---

📦 引入方式

import { DatePicker } from '@npmqg/react-ui-datepicker';

---

🚀 使用示例

📚 基本使用

示例

Loading...

源码

import React, { useState } from "react";
import { DatePicker } from "@npmqg/react-ui-datepicker";

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>} />

---

🧩 Props

Prop	类型	描述
value	Date | undefined	当前选中的日期（受控模式）
onChange	(date?: Date) => void	日期变化时触发的回调
renderValue	(date?: Date) => React.ReactNode	自定义触发按钮中显示的内容

---

✨ 功能

• 支持受控与非受控用法
• 可自定义显示值
• 使用 Popover 弹出 Calendar
• 支持传入初始值与回调函数

---

📐 样式

• 默认宽度：280px
• 未选中状态使用 text-muted-foreground
• 日期格式：PPP（如 Jan 1st, 2025）

---

🧱 依赖组件

• Button
• Popover, PopoverTrigger, PopoverContent
• Calendar

---

🛠️ 工具函数

• cn：合并类名函数（通常基于 clsx 或类似工具）