A powerful and intuitive ShadCN/UI component that allows users to input dates and times using natural language expressions like "tomorrow", "next Monday at 3pm", or "in 2 hours". Built with chrono-node for robust natural language parsing and designed to seamlessly integrate with existing ShadCN/UI projects.
https://iloveitaly.github.io/shadcn-natural-language-datetime-input
This project is based on Lingua Time Picker.
The updated DateTimePicker and DateTimePickerPopover components introduce some changes from the original project:
-
Customizable Time Picker Display: A new
showTimePickerprop lets you toggle the time picker on or off, allowing the component to be used for date-only or date-and-time inputs based on your needs. -
Flexible Date Formatting: The
dateTimeFormatFunctionprop enables custom date formatting, so you can control how dates appear (e.g., "MMM do yyyy" for dates or "MMM do yyyy, hh:mm a" for date-time). -
Tailorable Suggestions: The
suggestionsprop allows you to provide a custom list of default suggestions (e.g., "Tomorrow", "Next Sunday"), replacing the hardcoded defaults, making the natural language input more relevant to your application. -
Smoother State Synchronization: Enhanced handling ensures the input text always matches the selected date, preventing mismatches when choosing dates via the picker or typing natural language.
-
Improved Suggestion System: Suggestions update in real-time as you type, prioritizing default suggestions and falling back to parsed inputs (via
chrono-node), offering a more intuitive natural language experience. -
Better Keyboard Navigation: Arrow keys, Enter, and Escape now work seamlessly in the suggestion dropdown, improving accessibility for keyboard-only users. P