/** @jsxImportSource npm:react */ import { renderToString } from "npm:react-dom@18/server"; import React from "npm:react@18"; const clientScript = ` import { parse } from 'https://esm.sh/chrono-node@2.3.8'; const inputEl = document.getElementById('dateInput'); const outputEl = document.getElementById('output'); const clearBtn = document.getElementById('clearBtn'); function detectDate() { const inputText = inputEl.value; const parsedResults = parse(inputText); if (parsedResults.length > 0) { const detectedDate = parsedResults[0].start.date(); const detectedDateString = parsedResults[0].text; const formattedDate = formatDate(detectedDate); outputEl.innerHTML = \`

\${formattedDate} \${detectedDateString}

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

AI Date Input

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

View Source

`; export default (req: Request) => { return new Response(html, { headers: { "Content-Type": "text/html" } }); };

AIDateInput