Date Selector

Set due dates using natural language like in 2 hours or tomorrow at 3pm. Alternatively, you can select from predefined time periods like 1 hour, 1 day, 7 days, or 30 days.

Install

npx shadcn@latest add https://unlogg.com/r/date-selector.json

pnpm dlx shadcn@latest add https://unlogg.com/r/date-selector.json

bunx shadcn@latest add https://unlogg.com/r/date-selector.json

Features

• Natural Language Parsing: Type dates in natural language like "in 2 hours", "tomorrow at 3pm", or "next Friday"
• Preset Options: Quick selection with predefined time periods (1 hour, 1 day, 7 days, 30 days)
• Future Dates Only: Automatically ensures all selected dates are in the future
• Flexible Formatting: Displays both absolute and relative time formats
• Keyboard Navigation: Full keyboard support for accessibility

Usage

The Date Selector component uses chrono-node for natural language date parsing, allowing users to input dates in various formats:

• Relative times: "in 30 minutes", "in 2 hours", "in 3 days"
• Specific dates: "tomorrow", "next Friday", "Monday"
• Date with time: "tomorrow at 9am", "Friday at 2:30pm"
• Complex expressions: "next week Monday", "2 weeks from now"

Examples

Show relative time only