Date Range Picker — mcpskills.net

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。确保正确的日期格式、禁用未来日期选项和响应式行为。

## 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