Date Difference Calculator

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [startDate, setStartDate] = useState(''); const [endDate, setEndDate] = useState(''); const [daysDifference, setDaysDifference] = useState(null); const [error, setError] = useState(null); // Initialize state from URL on component mount useEffect(() => { const urlParams = new URLSearchParams(window.location.search); const start = urlParams.get('start') || ''; const end = urlParams.get('end') || ''; setStartDate(start); setEndDate(end); if (start && end) { calculateDaysDifference(start, end); } }, []); const calculateDaysDifference = (start: string, end: string) => { // Reset previous errors setError(null); setDaysDifference(null); // Validate dates if (!start || !end) { setError('Please select both start and end dates'); return; } const startDate = new Date(start); const endDate = new Date(end); // Additional validation if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) { setError('Invalid date selection'); return; } if (startDate > endDate) { setError('Start date must be before end date'); return; } // Calculate days difference const timeDiff = Math.abs(endDate.getTime() - startDate.getTime()); const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); setDaysDifference(daysDiff); }; const handleDateChange = (type: 'start' | 'end', value: string) => { // Update state based on which date is changed const newStartDate = type === 'start' ? value : startDate; const newEndDate = type === 'end' ? value : endDate; // Update URL with new dates const urlParams = new URLSearchParams(window.location.search); urlParams.set('start', newStartDate); urlParams.set('end', newEndDate); window.history.replaceState({}, '', `?${urlParams.toString()}`); // Update state setStartDate(newStartDate); setEndDate(newEndDate); // Calculate difference if both dates are set if (newStartDate && newEndDate) { calculateDaysDifference(newStartDate, newEndDate); } }; return (

📅 Date Difference Calculator

{/* Error Display */} {error && (

⚠️ {error}

)}

Start Date: handleDateChange('start', e.target.value)} style={{width: '100%', padding: '5px', margin: '10px 0'}} />

End Date: handleDateChange('end', e.target.value)} style={{width: '100%', padding: '5px', margin: '10px 0'}} />

{daysDifference !== null && (

Days Between Dates: {daysDifference} 🕰️

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Date Difference Calculator

`, { headers: { "content-type": "text/html", }, }); }

realTimeDateDifferenceForm