From 9bfbba1b9fdd0b3bad26f9f060f713d21828f516 Mon Sep 17 00:00:00 2001 From: liyunze <50455574+liyunze-coding@users.noreply.github.com> Date: Sun, 9 Jun 2024 14:11:06 +0800 Subject: [PATCH] fixed time locale bug --- src/pages/socials.astro | 154 ++++++++++++++++++++++++++++++++++------ 1 file changed, 133 insertions(+), 21 deletions(-) diff --git a/src/pages/socials.astro b/src/pages/socials.astro index 10f648e..63d72b4 100644 --- a/src/pages/socials.astro +++ b/src/pages/socials.astro @@ -3,9 +3,6 @@ import Layout from "../layouts/Layout.astro"; const MY_TIMEZONE = "Asia/Kuala_Lumpur"; -let hoursAhead = 0; -let minutesAhead = 0; - function getTimezoneDifference(timezone1: string, timezone2: string) { // Create two dates: one in each time zone const date1 = new Date().toLocaleString("en-US", { timeZone: timezone1 }); @@ -57,7 +54,7 @@ let { hours, minutes } = getTimezoneDifference( let timeDifference = displayTimeDifference(hours, minutes); -let time = new Date().toLocaleTimeString("en-US", { +let time = new Date().toLocaleTimeString("en-UK", { timeZone: MY_TIMEZONE, hour: "numeric", minute: "numeric", @@ -73,7 +70,7 @@ let displayDate = new Date().toLocaleDateString("en-UK", { }); --- - +

Date & Time

- {displayDate} -
- {time} {timeDifference} +

{displayDate}
+ {time} + + {timeDifference} +

@@ -577,7 +578,29 @@ let displayDate = new Date().toLocaleDateString("en-UK", {
- + + + +

Discord

@@ -612,7 +635,27 @@ let displayDate = new Date().toLocaleDateString("en-UK", {
- +

Twitter

@@ -669,10 +712,12 @@ let displayDate = new Date().toLocaleDateString("en-UK", {
- Hover Light effect by - + Hover Light effect by + Hyperplexed
@@ -770,14 +815,78 @@ let displayDate = new Date().toLocaleDateString("en-UK", { } }; - // const timeDifference = getTimezoneOffset(); - // console.log( - // `The time difference between Melbourne and the user's timezone is ${timeDifference} hours.` - // ); + function getTimezoneDifference(timezone1, timezone2) { + // Create two dates: one in each time zone + const date1 = new Date().toLocaleString("en-US", { + timeZone: timezone1, + }); + const date2 = new Date().toLocaleString("en-US", { + timeZone: timezone2, + }); - let time = null; + // Convert the dates to Date objects + const dateObj1 = new Date(date1); + const dateObj2 = new Date(date2); - setInterval( () => { + // Get the difference in minutes between the two dates + const diffMinutes = + (dateObj2.getTime() - dateObj1.getTime()) / (1000 * 60); + + // Convert the difference in minutes to hours and minutes + const diffHours = Math.floor(diffMinutes / 60); + const diffMinutesRemaining = Math.floor(diffMinutes % 60); + + return { hours: diffHours, minutes: diffMinutesRemaining }; + } + + function displayTimeDifference(hour, minutes) { + let ahead = false; + if (hour < 0) { + hour = 24 + hour; + } else { + ahead = true; + } + + if (hour === 0 && minutes === 0) { + return ""; + } + + let differenceDisplay = ahead ? "ahead" : "behind"; + + if (hour === 0) { + return `( ${minutes} minutes ${differenceDisplay} )`; + } + + if (minutes === 0) { + return `( ${hour} hours ${differenceDisplay} )`; + } + + return `( ${hour} hours and ${minutes} minutes ${differenceDisplay} )`; + } + + let { hours, minutes } = getTimezoneDifference( + Intl.DateTimeFormat().resolvedOptions().timeZone, + MY_TIMEZONE + ); + + let timeDifference = displayTimeDifference(hours, minutes); + + let time = new Date().toLocaleTimeString("en-UK", { + timeZone: MY_TIMEZONE, + hour: "numeric", + minute: "numeric", + hour12: true, + }); + + let displayDate = new Date().toLocaleDateString("en-UK", { + timeZone: MY_TIMEZONE, + weekday: "long", + year: "numeric", + month: "short", + day: "numeric", + }); + + setInterval(() => { time = new Date().toLocaleTimeString("en-UK", { timeZone: "Asia/Kuala_Lumpur", hour: "numeric", @@ -786,5 +895,8 @@ let displayDate = new Date().toLocaleDateString("en-UK", { }); document.getElementById("time-in-aus").innerText = time; - }, 2000) + }, 2000); + + document.querySelector("#time-difference").innerText = timeDifference; + document.querySelector("#display-date").innerText = displayDate;