Check if the store is open

JavaScript
1

Since date and time in JS is taken from user browser I am trying to understand what is the best way to check if my store is open or not. Say that my store is open every day from 9am to 3 pm and I am in Canada. i know how to check this is user who visit my site is from the same time zone but what happen is if user is say from Europe and therefore different time zone. How do I check his date and time and convert it to my date and time and let him know whether store is closed or not.

1 Like
2

Use getUTCHours() and then work out whether your store will be open taking into account time zone offset from UTC and any daylight saving time at your store’s location.

Do not use getTimezoneOffset() because that will give the offset of your website visitor’s location, not your store’s location.

1 Like
3

Would this show my local time regardless where visitors is coming from?

const serverTimeNow = new Date().toLocaleString(‘en-US’, { timeZone: “America/New_York” });
console.log(serverTimeNow);

4

Yes, that takes into account daylight saving time.

If for instance your store is closed on Sundays, consider using the date portion of the string to determine the day of the week in New York. It could be different to the day of the week at your website visitor’s location.

1 Like
5

how do you get the day of the week from the visitor time location?

6

Use:

const dayOfWeek = new Date().toLocaleString('en-US', { timeZone: 'America/New_York', weekday: 'long' });

(Edited)

7

I know but how do you get the date from someone who is visiting my site (Ontario) from say London in UK?

8

new Date().toLocaleString('en-CA', { timeZone: 'America/Toronto' })

. . . .will give someone in London the date and time in eastern Ontario: currently Eastern Daylight Time (UTC -4 hours). The date will be in YYYY/MM/DD format (not the silly format used in USA).

1 Like
9

I know but would I get the date from user that is in London and convert their time to my time so I can show them whether office is closed or open

10

With that code a website visitor in London will get eastern Ontario date and time (as a string).

Surely you are mostly interested in the day of the week, not the date, but will need to consider national holidays. Easter will be a little challenging!

11

Could you just use the Google Map API?

specifically the details#PlaceOpeningHours (link below)

12

I could but was hoping to use date function. If I can get offset value as in the case I am testing Europe it gives me -120. I am confused what function I could use where I could add these 120 offset to get to my time?

13

If you go the Google API way be aware, if you aren’t, that you’ll have to enter your billing details in order to make it work. Google is giving away $200 of usage, which is about 12,000 requests for Place Details API per month, but I wouldn’t be surprised if this amount will be lowered at some stage.

14

If you want eastern Ontario date and time you do not need to use an offset value.

15

I know but if someone from Alberta visits my site i would convert their hours into mine in order to determine if the store is open or closed

16

You do not need to convert their hours into your hours because

new Date().toLocaleString('en-CA', { timeZone: 'America/Toronto' })

gives anyone in the world the date and time in eastern Ontario (as a string).

17

Yes but I have to be able to figure out their hours because if my store is open from 9-5 in my Ontario time and someone is visiting from time zone i want to tell them “hey office is closed now” and display my local hours

18

See:

19

Javascript will do the “figuring out” bit for you. If you tell it you want the time in Ontario time (Which should be “America/Toronto”), Javascript handles the math for you and gives you a date object with the correct offset from UTC to be local Ontario time.

UTC living up to its name, coordinates the time from every timezone in the world into a single unchanging counter; seconds from Coordinated Universal Time (UTC) [Yes, I know the acronym doesnt line up; that’s intentional].

When a new Date object is created, Javascript takes the current UTC time, then (if not overridden) adds an offset to it to generate the user’s current local time.

Adding a timeZone to the Date constructor overrides the offset and tells Javascript to instead add the offset for the prescribed timezone, instead of the user’s own.

As far as figuring out your local hours of operation, take your local (not the Ontario one) date object, getTimezoneOffset() it, and divide by 60. That’s your number of hours to shift 9 to 5 by.

EDIT: Of course, the 9-5 is also offset. So get the number of hours for both your Ontario date and your local date, subtract one from the other, and modify 9 to 5 by that number.

20

A date object simply encapsulates the number of milliseconds since midnight UTC at the start of 1st January 1970. It does not encapsulate an offset or any other time zone information.