如何使用shadcn/ui在React中构建可复用的日期时间选择器
内容提要
本文介绍如何在React项目中快速实现日期时间选择器，提供三种可直接安装的Shadcn组件：日期时间选择器（含日历和起止时间）、日期范围选择器（双月视图并计算住宿夜数）、纯时间选择器（利用浏览器原生控件）。每个组件均通过一条CLI命令安装，基于Base UI构建，支持复制粘贴到v0等工具，适合预订、预约等场景。
延伸解读
组件安装与使用要点
文章中的三个组件均通过 shadcn CLI 安装，命令格式为 `npx shadcn@latest add @shadcn-space/date-picker-01`，只需替换包名即可。安装前需确保项目已配置好 shadcn/ui。这些组件基于 Base UI 构建，并支持复制粘贴到 v0、Lovable 等工具，方便快速集成到工作流中。
日期时间选择器的实现思路
日期时间选择器将日期和时间分开管理：日期通过日历组件选择，时间使用原生 `<input type="time">`。这样避免了状态同步的复杂性，同时原生时间输入自带浏览器支持、移动端键盘和本地化格式。组件还演示了异步操作的状态流转（idle→loading→success），实际应用中可替换为 API 调用。
日期范围选择器的优势
日期范围选择器利用 `mode="range"` 和 `DateRange` 对象，简化了范围选择逻辑。双月视图减少导航，提升长周期选择体验。住宿夜数通过日期差直接计算，无需额外库。相比单日期选择器，它更适合酒店预订、租赁等场景，且代码更简洁。
时间选择器的原生增强
纯时间选择器并未重建时间选择功能，而是包装原生 `<input type="time">`，通过 `showPicker()` 方法以编程方式打开浏览器原生选择器。隐藏默认图标以避免重复，同时保留原生可访问性、移动键盘支持和本地化。这种方案在保持兼容性的同时，提供了自定义样式和交互。
Q&A
如何在React项目中安装shadcn/ui的日期时间选择器组件？
使用shadcn CLI命令安装，例如：npx shadcn@latest add @shadcn-space/date-picker-01。其他组件只需替换包名，如date-picker-02和date-picker-03。支持pnpm、npm、yarn和bun。
shadcn/ui的日期时间选择器组件有哪些类型？
有三种：日期时间选择器（结合日历和起止时间）、日期范围选择器（双月视图并计算住宿夜数）、纯时间选择器（利用浏览器原生控件）。
日期时间选择器组件如何工作？
它使用React状态管理选中的日期和起止时间，日历放在Popover中，选择日期后关闭弹窗。时间字段使用原生input type="time"，支持浏览器内置功能。按钮状态模拟异步操作（idle→loading→success）。
日期范围选择器如何计算住宿夜数？
通过计算结束日期和开始日期的时间差，除以一天的毫秒数（1000*60*60*24）并四舍五入得到夜数。例如：Math.round((date.to.getTime() - date.from.getTime()) / (1000 * 60 * 60 * 24))。
纯时间选择器如何利用浏览器原生控件？
它使用input type="time"，并通过useRef获取输入元素，点击时钟图标时调用showPicker()方法打开浏览器的原生时间选择器。同时隐藏默认的日历指示器，避免重复图标。
这些组件适合哪些应用场景？
日期时间选择器适合会议安排、预约系统、面试预约、活动注册和SaaS调度。日期范围选择器适合酒店住宿、租赁、旅行表单。纯时间选择器适合选择时间段。
这些组件基于什么构建？
它们基于Radix和Base UI原语构建，文中版本使用Base UI。同时支持复制粘贴到v0、Lovable或Bolt等工具。
