Getting the components of a Date after applying a timezone in JavaScript

Question

Here's the thing: I'm currently programming a "time availability" functionality.

Example: Sunday: 7:00 a.m. to 9:30 p.m. Monday: 8:00 a.m. to 10:00 p.m. Tuesday: 7:30 a.m. to 8:30 p.m. etc...

The idea is that a user can specify a time range in which a business is 'available' for the public. Specific day numbers are irrelevant - it does not matter if it is currently Monday the 3rd or Monday the 10th, the time range specified for 'Monday' applies to ALL Mondays. Beginning and ending times for each time range are saved as an hour field (1-12), a minute field (0-59) and a period (a.m. or p.m.) field. It is necessary for it to be this way, since this is specific to my country and here we use A.M./P.M., not the 24-hour clock. And of course, since we're talking about just hours and minutes, and not a SPECIFIC full date, we don't apply timezones in this case.

However, in some other place I need to have a JavaScript code that gets the current Date (specific full day and time), applies a specific timezone to said Date ("America/Panama", to be precise), and then separates that Date into its components (I need to have separate values for the day of the week, the day number, hour, minute and period (a.m. or p.m.), according to the timezone). This is in order to evaluate if the current Date, according to the day of the week, is in the specified time range (as explained in the last paragraph).

And yes, I know that Dates are something "universal" internally, and that timezones are supposedly just "something to apply in order to show a string to the user". Seen that before. But as you can see, here that isn't the case. Any ideas?

EDIT: Sorry, forgot to clarify: the solution has to be done without third-party scripts. That is, I need pure, "vanilla" JavaScript.

All libraries are written in vanilla JS, and there is no need to re-invent the wheel. If you don't want to include third-party scripts, it should be no problem to host your own copy of the library. — Bergi, Jan 08 '13 at 01:36

score 0 · Answer 1 · answered Jan 08 '13 at 01:29

0

You should be able to use a library like moment.js to get all of this information.

answered Jan 08 '13 at 01:29

Aran Mulholland

23,555
29
141
228

Sorry, edited my question to clarify... Can't use that (cool library, though). Can't have dependencies. – Emmanuel Figuerola Jan 08 '13 at 01:31
I'm considering this solution. Problem is, I'm not entirely sure I can upload and then require scripts where I'm deploying this code (it has to be uploaded to Parse.com's "Cloud Code" and I've never used it before, so... if it can be uploaded and "included" in a .js of mine that'd be awesome). – Emmanuel Figuerola Jan 08 '13 at 01:48
Agh, just read on another question that "JavaScript currently does not provide a "native" way of including a JavaScript file into another". So basically I can't include a JS inside another JS (therefore can't include moment.js in my own custom .js file). This JS isn't inserted inside an HTML file, so... – Emmanuel Figuerola Jan 08 '13 at 01:52
If you need to add javascripts from JavaScripts then you can: var s = document.createElement("script");s.src="locationtojs.js";document.head.appendChild(s); – HMR Jan 08 '13 at 02:31
@EmmanuelFiguerola if you wanted to do a hack you could just copy the code and include it at the top of your javascript file. Find out if you can use http://requirejs.org/ – Aran Mulholland Jan 08 '13 at 03:20

score 0 · Accepted Answer · answered Jan 08 '13 at 01:41

0

So, you need the current Date:

var now = new Date();

You need to change it by the time zone:

now.setHours(now.getHours() + timezone);

And get the other values:

var dayOfWeek = now.getDay();
var dayOfMonth = now.getDate();
var hour = now.getHours() % 12;
var minute = now.getMinutes;
var period = now.getHourse < 12 ? 0:1; //0 is AM, 1 is PM

Is that what you're looking for?

answered Jan 08 '13 at 01:41

Jeff

12,555
5
33
60

1

Wouldn't manipulating the hour like that cause errors? For example: say the timezone is +7 and the hour is 23... would it end being 23+7=30, thus being an invalid hour? Also, would adding to that hour actually ADVANCE the date? That is, adding 7 hours to a date with hour=23 should ADVANCE the date to the next day. – Emmanuel Figuerola Jan 08 '13 at 01:44
Yes, it will advance the date. – Bergi Jan 08 '13 at 01:48
1

@EmmanuelFiguerola See [the w3schools article on this](http://www.w3schools.com/js/js_obj_date.asp) - look under the "set dates" section - "Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!" - I'm assuming that it works the same way for hours. – Jeff Jan 08 '13 at 01:52
2

You will need to use the UTC methods, or you are getting wrong values. To use the normal methods, you only would add the timezone *difference* from current zone to target zone. – Bergi Jan 08 '13 at 01:58

score 0 · Answer 3 · edited May 23 '17 at 12:12

It is necessary for it to be this way, since this is specific to my country and here we use A.M./P.M., not the 24-hour clock

No, you've got that wrong. This is not the data format, but just your custom input/output formatting. The data format would be something that is easy to store as a value and to do the computations with - using the 24-hour clock. Its unit could be "minutes since midnight" for example.

gets the current Date

You can use the Date object for that.

applies a specific timezone

That's a bit complicated in JavaScript. You only have the timezone of the current environment, for everything else you will need to use a workaround and shift the actual UTC date. This can be done by the set… methods which will handle carry-over and the like; check out this example.

score 0 · Answer 4 · answered Jan 08 '13 at 03:05

Since Panama doesn't have daylight saving you can add 5 hours to UTC all year round.

var d = new Date();
console.log("Date is now:"+d.toString());
var utc=new Date(d.getTime()+(d.getTimezoneOffset()*60000));
// or utc=d;utc.setHours(utc.getHours()+(utc.getTimezoneOffset()/60))
// note that UTC does not represent correct milliseconds from epoch for UTC now
//  it has the UTC values for getHours
//  if current locale has daylight saving JavaScript will give the correct
//  timezoneoffset
console.log("UTC date is now:"+utc.toString());
//http://www.timeanddate.com/worldclock/city.html?n=192
// panama has no daylight saving and is UTC -5 all year round
// 18000000 is 5*60*60*1000 (5 hours in milliseconds)
panama = new Date(utc.getTime()+(18000000));
//or panama=utc;panama.setHours(panama.getHours()+5);
console.log(panama.toString());

Getting the components of a Date after applying a timezone in JavaScript

4 Answers4