/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { format, parseISO } from "https://esm.sh/date-fns"; const formatOptions = [ { label: "Short Date", value: "MM/dd/yyyy" }, { label: "Long Date", value: "MMMM d, yyyy" }, { label: "Short Date and Time", value: "MM/dd/yyyy HH:mm" }, { label: "Long Date and Time", value: "MMMM d, yyyy 'at' h:mm a" }, { label: "ISO 8601", value: "yyyy-MM-dd'T'HH:mm:ssxxx" }, { label: "Relative Time", value: "PPP" }, { label: "Day of Week", value: "EEEE" }, { label: "Custom", value: "custom" }, ]; function App() { const [dateTime, setDateTime] = useState("2023-06-15T14:30:00"); const [selectedFormat, setSelectedFormat] = useState("MM/dd/yyyy"); const [customFormat, setCustomFormat] = useState("yyyy-MM-dd HH:mm:ss"); const formatDate = () => { try { const date = parseISO(dateTime); const formatString = selectedFormat === "custom" ? customFormat : selectedFormat; return format(date, formatString); } catch (error) { return "Invalid date or format"; } }; return (

DateTime Formatter

Date and Time: setDateTime(e.target.value)} />

Format:

{selectedFormat === "custom" && (

Custom Format: setCustomFormat(e.target.value)} />

)}

Formatted Result:

{formatDate()}

Format Examples:

yyyy - Four-digit year
MM - Two-digit month (01-12)
dd - Two-digit day of the month (01-31)
HH - Two-digit hour in 24-hour format (00-23)
mm - Two-digit minute (00-59)
ss - Two-digit second (00-59)
a - AM/PM indicator
EEEE - Full name of the day of the week
MMMM - Full name of the month

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

`, { headers: { "content-type": "text/html", }, } ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 0; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #2c3e50; } h2 { color: #3498db; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input, select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .result { background-color: #e8f4fd; padding: 15px; border-radius: 4px; margin-top: 20px; } .examples { margin-top: 30px; } ul { padding-left: 20px; } footer { margin-top: 30px; text-align: center; } a { color: #3498db; text-decoration: none; } a:hover { text-decoration: underline; } `;

datetimeFormatterTool

Versions

v0