AI Date Input is a smart date detection React component. It uses natural language processing to interpret various date and time inputs, providing a seamless user experience for date entry.
- Real-time date and time detection as you type
- Supports a wide range of date and time formats
- Displays detected date in a formatted output
- Shows both the parsed date and the original input text
- Clean, minimalist UI with a clear input field
- One-click clear functionality
The AI Date Input uses the chrono-node library to parse natural language date and time expressions. As the user types, the input is continuously analyzed, and when a valid date or time is detected, it's displayed below the input field.
The detected date is shown in two formats:
- A formatted date and time (e.g., "09/09/2024 02:27 PM")
- The original text that was interpreted as a date (e.g., "5 days from now")
To use this component in Val Town:
- Create a new val or edit an existing one
- Copy and paste the entire code into the val
- Save the val
- Access the val's URL to see the AI Date Input in action
You can customize the appearance and behavior of the AI Date Input:
- Modify the Tailwind CSS classes in the HTML to change the styling
- Adjust the date formatting in the
formatDate function
- Change the parsing behavior by modifying the
detectDate function
- React 18
- chrono-node (for date parsing)
- Tailwind CSS (for styling)
- The component uses server-side rendering for the initial HTML
- Client-side JavaScript handles the interactive features
- Date parsing is done in real-time on the client-side
To contribute to this project:
- Fork the val in Val Town
- Make your changes
- Test thoroughly
- Submit a pull request or share your modified version
This project is open-source and available under the MIT License.
©️ Ganesh Kumar 2024
