日期控件 DatePicker

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

---

📦 引入方式

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

---

🚀 使用示例

📚 基本使用

示例

Loading...

源码

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

export default function DemoDatePicker() {
  const [selectedDate, setSelectedDate] = useState();
  const [selectedRangDate, setSelectedRangDate] = useState();

  return (
    <div className="flex flex-col gap-2">
      <DatePicker value={selectedDate} className="DatePickerBox" onChange={setSelectedDate} />
      <DateRangPicker value={selectedRangDate} className="DatePickerBox" onChange={setSelectedRangDate} />
    </div>
  );
}

📚 自定义显示内容

示例

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
• 清除按钮悬浮时显示，位于右侧

---

🧱 依赖组件

• Button
• Popover, PopoverTrigger, PopoverContent
• Calendar
• cn（合并类名函数）

---

🛠️ 工具函数

• setFormatFunc(date: Date)：将日期对象格式化为字符串
• setPauseFunc(value: string | Date)：解析字符串或日期为 Date 对象