Forms
日期范围选择器
一个带预设范围、日历浮层和清除按钮的日期范围选择器。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a date range picker component. Include a button trigger showing the selected range or placeholder text, a popover with a two-month calendar view, preset buttons (Today, Last 7 days, Last 30 days, This month), and a clear button. Use shadcn/ui Popover, Calendar, and Button components and Tailwind CSS. Ensure proper date formatting, disabled future dates option, and responsive behavior.
中文提示词
创建一个日期范围选择器组件。包含显示所选范围或占位文本的按钮触发器、带两个月日历视图的浮层、预设按钮(Today、Last 7 days、Last 30 days、This month)和清除按钮。使用 shadcn/ui Popover、Calendar 和 Button 组件以及 Tailwind CSS。确保正确的日期格式、禁用未来日期选项和响应式行为。

概述
一个用于筛选、报告和预订流程的日期范围选择器。包含预设和清除操作以快速选择。
功能特性
- 显示所选范围的按钮触发器
- 两个月日历浮层
- 常用预设范围
- 清除选择按钮
- 可选禁用未来日期
- 响应式日历布局
使用方法
将提示词复制到 v0 或 Cursor 中。将所选范围连接到你的筛选或报告逻辑。
自定义选项
修改提示词以:
- 添加自定义日期预设
- 支持单日期模式
- 添加时间范围选择
- 高亮显示已预订或禁用日期