How to display proper time base on user timezone?

Question

Description:

I build this web app for my son as his newborn gift last year. My wife & I are obsessed with it since. We use it extensively every day until now on our phones, tablets, laptops, TVs, and even our Samsung fridge (required only internet & browser). I will release this to ALL parents in the world soon* for FREE. But now I want to allow my nephew & niece in Texas to use this dashboard/web app as a family test. I have to support diff timezone. Right now it only supports US ET which is where I live.

JJ's Dashboard

Desktop View (Read-only)

https://mybabies.app/baby/a4b7efe4-9c2f-4c48-b5b1-cc516a8f027f?code=N0Vk90

Setup:

My config/app.php current set to 'timezone' => 'America/New_York', I use moment.js a lot in the front-end to display my entire date/time logic.

I was thinking:

to take the input as +2, +3, and so on.... so I can render the time based on that. I know I have to take user timezone as input and store that into the database as : +2, +3, ... . I've done that. I can also query back what user set as well. I just don't know what to do with that TZ. I'm afraid that I will change my codes in tons of places..

Is there a way to just detect user TZ just like we detect user dateTime? Should I consider that route instead ?

What are the proper steps I should take?

From my experience the browser is the most likely one to have an accurate knowledge of the user's timezone so I think you could leverage moment.js to take the user's current timezone into account when formatting — apokryfos, Jan 22 '22 at 19:14
You can get user time zone in JavaScript using Web Browser Timezone offset then pass that to PHP on the back-end to save to your Database. In JavaScript you could do var userTz = new Date().getTimezoneOffset(); then find a way of posting userTz back to PHP on the back-end. See documentation here https://usefulangle.com/post/31/detect-user-browser-timezone-name-in-php — Joseph, Jan 22 '22 at 19:15
@apokryfos I like your suggestion because it seems to be the least work possible, just use the moment to display the updated time based on the user timezone, and leave the current time that query from the database as is... only works need to be done in the front-end. Am I understanding this correctly? — code-8, Jan 22 '22 at 19:22
@Joseph Thanks for your answer, I don't mind passing the userTz to the database, but I'm wondering if maybe we don't have to modify any back-end codes so less test for me after that. There is so many timestamps in the back-end codes, and the app also use live web-socket too when users `pressed to log` ... I'm afraid that this will be a night-more for testing... Have you reviewed apokryfos's comment? What is your thought on that? — code-8, Jan 22 '22 at 19:25
Does this answer your question? [How do I get the current date in JavaScript?](https://stackoverflow.com/questions/1531093/how-do-i-get-the-current-date-in-javascript) — code, Jan 22 '22 at 19:35
Although it's still in proposal stage you might want to familiarize yourself with the upcoming Temporal API that will eventually replace js Date — charlietfl, Jan 22 '22 at 19:44

code-8 · Answer 1 · 2022-01-23T17:20:50.240

I think very optimistically... I got a timezone to work on my app now. Huge thanks to all the comments from everyone above, without you guys, I will never found the best working solution for my situation with such minimum changes.

Front-end

First, I added 2 lines of code, I grab the client timezone

 const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; <<< ADDED : Line #1

Since I have already made an ajax on log pressed anyway, I just need to one more field to the server

var data    = {};
data.tz     = timezone; <<< ADDED : Line #2

Back-end

Second, with 5 lines of code, I can access what I sent from FE like so to overwrite the created_at time.

$tz     = $inputs['tz']; <<< ADDED : Line #3 

$clientDate = new DateTime("now", new DateTimeZone($tz) ); <<< ADDED : Line #4 
$clientTimestamp = $clientDate->format('Y-m-d H:i:s'); <<< ADDED : Line #5 

$log             = new BabyLog;
$log->type       = $type;
$log->created_at = $clientTimestamp; <<< ADDED : Line #6 
$log->updated_at = $clientTimestamp; <<< ADDED : Line #7 
$log->save();

Now

My database stored the right timestamp() based on my client device/browser.

No other codes needed, it just works.

Test

I changed the Date & Time on my iPhone from Chicago to New York back and forth. I pressed log, it saved, and I noticed my front-end displayed the accurate time based on my client timezone now.

I hope

this post helps someone like me that wants to make their web-app work globally with minimal code changes. To be very specific in 7 lines of codes.