\n \n \\${formattedDate}\n \n \n \\${detectedDateString}\n \n

\n \\`;\n \n inputEl.value = ''; // Clear the input after detection\n } else {\n outputEl.innerHTML = '';\n }\n}\n\nfunction clearAll() {\n inputEl.value = '';\n outputEl.innerHTML = '';\n inputEl.focus();\n}\n\nfunction formatDate(date) {\n if (!date) return '';\n return date.toLocaleString('en-US', {\n month: '2-digit',\n day: '2-digit',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit',\n hour12: true,\n });\n}\n\ninputEl.addEventListener('input', detectDate);\nclearBtn.addEventListener('click', clearAll);\n`;\n\nconst html = `\n\n\n\n \n \n AI Date Input\n \n \n\n\n

AI Date Input

\n \n \n ×\n \n

\n Try typing things like \"tomorrow\", \"next Friday\", \"3 days from now\", or \"2024-09-15 14:30\".\n

\n \n View Source\n \n

\n \n\n\n`;\n\nexport default (req: Request) => {\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n};","createdAt",["D",1725479631523],"version",20,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","ganeshkumartk","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybGNQQVRGM3pmRGQ3SExHdnMwOGpYUzZsV0YifQ","forkedVal","interval","slug","ganeshkumartk/AIDateInput","description","AI Date Input 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. Features 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 How It Works 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\") Usage 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 Customization 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 Dependencies React 18 chrono-node (for date parsing) Tailwind CSS (for styling) Technical Details 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 Contributing 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 License This project is open-source and available under the MIT License.\n©️ Ganesh Kumar 2024","versions",[142,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,212,215],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1725479631523],{"_118":146,"_143":-5,"_116":147,"_113":148},18,["D",1725479290842],"9d7c4c10-6af6-11ef-81cf-de64eea55b61",{"_118":150,"_143":-5,"_116":151,"_113":152},17,["D",1725479246255],"82e8ee26-6af6-11ef-afa7-de64eea55b61",{"_118":154,"_143":-5,"_116":155,"_113":156},16,["D",1725479190912],"61ec5442-6af6-11ef-afec-de64eea55b61",{"_118":158,"_143":-5,"_116":159,"_113":160},15,["D",1725479170158],"558d7ffa-6af6-11ef-8bf3-de64eea55b61",{"_118":162,"_143":-5,"_116":163,"_113":164},14,["D",1725478989665],"e9f89252-6af5-11ef-8335-de64eea55b61",{"_118":166,"_143":-5,"_116":167,"_113":168},13,["D",1725478871625],"a39ce5f6-6af5-11ef-bdba-de64eea55b61",{"_118":170,"_143":-5,"_116":171,"_113":172},12,["D",1725478838107],"8fa2aba8-6af5-11ef-aa26-de64eea55b61",{"_118":174,"_143":-5,"_116":175,"_113":176},11,["D",1725478789201],"727c097a-6af5-11ef-83d5-de64eea55b61",{"_118":178,"_143":-5,"_116":179,"_113":180},10,["D",1725478646172],"1d3b7478-6af5-11ef-99aa-de64eea55b61",{"_118":182,"_143":-5,"_116":183,"_113":184},9,["D",1725478501772],"c729df84-6af4-11ef-aa49-de64eea55b61",{"_118":186,"_143":-5,"_116":187,"_113":188},8,["D",1725478478214],"b91f5a5e-6af4-11ef-b369-de64eea55b61",{"_118":190,"_143":-5,"_116":191,"_113":192},7,["D",1725478377850],"7d4cd326-6af4-11ef-913e-de64eea55b61",{"_118":194,"_143":-5,"_116":195,"_113":196},6,["D",1725478251496],"31fccaf2-6af4-11ef-a55a-de64eea55b61",{"_118":198,"_143":-5,"_116":199,"_113":200},5,["D",1725478060878],"c05ebaea-6af3-11ef-9f0d-de64eea55b61",{"_118":202,"_143":-5,"_116":203,"_113":204},4,["D",1725478009542],"a1c59b8a-6af3-11ef-bc26-de64eea55b61",{"_118":206,"_143":-5,"_116":207,"_113":208},3,["D",1725477892721],"5c24090e-6af3-11ef-9b20-de64eea55b61",{"_118":90,"_143":-5,"_116":210,"_113":211},["D",1725477804971],"27d635d2-6af3-11ef-93e3-de64eea55b61",{"_118":122,"_143":-5,"_116":213,"_113":214},["D",1725477772332],"14624496-6af3-11ef-8684-de64eea55b61",{"_118":31,"_143":-5,"_116":216,"_113":217},["D",1725476253110],"8adb3726-6aef-11ef-8eef-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":225,"_226":227,"_94":228},"single","redirect","/v/ganeshkumartk/AIDateInput/versions",{"_113":164,"_114":229,"_118":162,"_116":230,"_231":99,"_100":101,"_108":109,"_130":131,"_11":96,"_232":-5,"_233":-5,"_234":-5,"_222":26,"_136":137},"/** @jsxImportSource npm:react */\nimport React from \"npm:react@18\";\nimport { renderToString } from \"npm:react-dom@18/server\";\n\nconst clientScript = `\nimport { parse } from 'https://esm.sh/chrono-node@2.3.8';\n\nconst inputEl = document.getElementById('dateInput');\nconst outputEl = document.getElementById('output');\nconst clearBtn = document.getElementById('clearBtn');\n\nfunction detectDate() {\n const inputText = inputEl.value;\n const parsedResults = parse(inputText);\n \n if (parsedResults.length > 0) {\n const detectedDate = parsedResults[0].start.date();\n const detectedDateString = parsedResults[0].text;\n const formattedDate = formatDate(detectedDate);\n \n outputEl.innerHTML = \\`\n

\n \n \\${formattedDate}\n \n \n \\${detectedDateString}\n \n

\n \n \n ×\n \n

\n \n\n\n`;\n\nexport default (req: Request) => {\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n};",["D",1725478989665],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

AIDateInput

Version 14