Created
December 14, 2025 05:51
-
-
Save ggorlen/e9ba6db3963ffdaca969b2eb1ae9709a to your computer and use it in GitHub Desktop.
utc to pst converter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>UTC → Pacific Time Converter</title> | |
| <!-- Luxon --> | |
| <script src="https://cdn.jsdelivr.net/npm/luxon@3.4.0/build/global/luxon.min.js"></script> | |
| <!-- Chrono --> | |
| <script src="https://unpkg.com/chrono-node@1.4.9/dist/chrono.js"></script> | |
| <style> | |
| :root { | |
| --bg: #ffffff; | |
| --fg: #111111; | |
| --muted: #666666; | |
| --input-bg: #f2f2f2; | |
| --border: #cccccc; | |
| --code-bg: #eaeaea; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg: #0f0f0f; | |
| --fg: #f0f0f0; | |
| --muted: #aaaaaa; | |
| --input-bg: #1c1c1c; | |
| --border: #333333; | |
| --code-bg: #1a1a1a; | |
| } | |
| } | |
| body { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--bg); | |
| color: var(--fg); | |
| padding: 24px; | |
| } | |
| .container { | |
| max-width: 520px; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 44px; | |
| font-size: 15px; | |
| padding: 8px 10px; | |
| background: var(--input-bg); | |
| color: var(--fg); | |
| border: 1px solid var(--border); | |
| border-radius: 6px; | |
| resize: none; | |
| } | |
| textarea::placeholder { | |
| color: var(--muted); | |
| } | |
| .label { | |
| margin-top: 10px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| code { | |
| display: block; | |
| margin-top: 4px; | |
| padding: 6px 8px; | |
| background: var(--code-bg); | |
| border-radius: 4px; | |
| font-size: 14px; | |
| overflow-x: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>UTC → Pacific Time</h2> | |
| <div class="label">UTC date string</div> | |
| <textarea | |
| id="utcInput" | |
| placeholder="2025-12-13 20:27:50.595452 +00:00" | |
| ></textarea> | |
| <div id="pstResult"></div> | |
| </div> | |
| <script> | |
| const { DateTime } = luxon; | |
| const utcInput = document.getElementById("utcInput"); | |
| const pstResult = document.getElementById("pstResult"); | |
| function parseUtcString(input) { | |
| const results = chrono.parse(input); | |
| if (!results.length) throw new Error("Invalid date"); | |
| const result = results[0]; | |
| let date = result.start.date(); | |
| if (!result.start.isCertain("timezoneOffset")) { | |
| date = new Date(date.getTime() - date.getTimezoneOffset() * 60_000); | |
| } | |
| return DateTime | |
| .fromJSDate(date, { zone: "utc" }) | |
| .setZone("America/Los_Angeles"); | |
| } | |
| function render() { | |
| const value = utcInput.value.trim(); | |
| if (!value) { | |
| pstResult.innerHTML = ""; | |
| return; | |
| } | |
| try { | |
| const pacific = parseUtcString(value); | |
| const iso = pacific.toISO(); | |
| const human12 = pacific.toFormat("MM/dd/yy h:mm:ss a ZZZ"); | |
| const human24 = pacific.toFormat("MM/dd/yy HH:mm:ss ZZZ"); | |
| pstResult.innerHTML = ` | |
| <div class="label">Human (12-hour)</div> | |
| <code>${human12}</code> | |
| <div class="label">Human (24-hour)</div> | |
| <code>${human24}</code> | |
| <div class="label">ISO (Pacific)</div> | |
| <code>${iso}</code> | |
| `; | |
| } catch (err) { | |
| console.error(err); | |
| pstResult.innerHTML = | |
| '<div class="label">Invalid UTC date string.</div>'; | |
| } | |
| } | |
| utcInput.addEventListener("input", render); | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment