# Natural Language Date Picker – Type "next fri 3pm" and the Calendar Follows

> Natural Language Date Picker for React and Tailwind CSS (shadcn/ui): type "next fri 3pm" or "in 2 weeks" and the calendar follows. It is built to let people write dates as they say them: a chip shows the reading after a short pause, the calendar turns to its month, the day pulses and Enter confirms. The grammar is an exported pure parseNaturalDate(text, now) with no date library. Controlled or uncontrolled, onValueChange with its source, min/max dates, a keyboard-driven role="grid" calendar, reduced motion, light and dark. Use it for due dates, reminders and filters. The included demo types three phrases on a fixed clock and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Date Picker, Calendar, Form, Input, AI
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/natural-language-date-picker

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/natural-language-date-picker?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/date-picker.md