Forms
Date Range Picker
A date range picker with preset ranges, calendar popover, and clear button.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
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.
Chinese Prompt
创建一个日期范围选择器组件。包含显示所选范围或占位文本的按钮触发器、带两个月日历视图的浮层、预设按钮（Today、Last 7 days、Last 30 days、This month）和清除按钮。使用 shadcn/ui Popover、Calendar 和 Button 组件以及 Tailwind CSS。确保正确的日期格式、禁用未来日期选项和响应式行为。
Overview
A date range picker for filters, reports, and booking flows. Includes presets and a clear action for fast selection.
Features
- Button trigger with selected range display
- Two-month calendar popover
- Common preset ranges
- Clear selection button
- Optional future date disabling
- Responsive calendar layout
Usage
Copy the prompt into v0 or Cursor. Connect the selected range to your filter or reporting logic.
Customization
Modify the prompt to:
- Add custom date presets
- Support single date mode
- Add time range selection
- Highlight booked or disabled dates