Help - Search - Members - Calendar
Full Version: display a day and time in localized timezone
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
bluffwood
I produce radio shows, that are streamed on multiple outlets at various times. I'd like to list of schedule of when people can tune in. These are not podcasts but live feeds of streaming radio stations.

For example, my show runs 5 times on the weekend.
Saturday Noon CT on station A
Sunday 7am MT on station B
Sunday Noon MT on station C
Sunday 9pm ET on Station D
Sunday 9pm MT on Station E


It's the same times week to week, so I don't want a date, just a day and time.

I'd like the user to see these fixed days/times in their local timezone

All of the streaming stations (so far) participate in Daylight saving time (US/Northern hemisphere) but that won't likely be the case for much longer. It would be nice if the displays of this schedule took DST of the source and the local listener into account.

So if the viewer is in Eastern Time, it would read:
Saturday 1pm ET on station A
Sunday 9am ET on station B
Sunday 2pm ET on station C
Sunday 9pm ET on Station D
Sunday 11pm ET on Station E


and a viewer in Pacific time would read:
Saturday 10am PT on station A
Sunday 6am PT on station B
Sunday 11am PT on station C
Sunday 6pm PT on Station D
Sunday 8pm PT on Station E


this will just display in a cell in an html table.

Thanks, in advance, for your help.
Christian J
With a server-side script (e.g. PHP) you can get the time set on the radio show's web server. Next, with javascript you can get the time set on the user's own computer, and by adding/subtracting those two time values find out the time difference.
bluffwood
QUOTE(Christian J @ Dec 31 2016, 08:04 AM) *

With a server-side script (e.g. PHP) you can get the time set on the radio show's web server. Next, with javascript you can get the time set on the user's own computer, and by adding/subtracting those two time values find out the time difference.


it's much simpler than that. I'll hand code the day/time in whatever form a script can convert them to "user time"

just need a real simple script.
pandy
Will JavaScript suffice?

If I've understood this half right it should be really simple, but it isn't. This is what we SHOULD be able to do, take a UTC time and convert it to local time, but it doesn't work in (most?) browsers.

CODE
var airTime = new Date('2016-01-01 17:00:00 UTC');
var localAirTime = airTime.toLocaleString();
alert(localAirTime);


toString() automatially converts to local date but JavaScript chokes on the date format. Because of this problem there's a lot of JavaScript time libraries around. You can google for that.

I discovered that it works just fine if you convert the date and time to epoch time.
https://en.wikipedia.org/wiki/Unix_time

You do that with getTime(). Then you can get it back to a normal time format in different ways. You want the user's local date and time, so you could either use toString() which will produce the standard format or you could use toLocaleString() which will produce the format the user has chosen for his machine.

Note that you need to use UTC and not your local time for the airing times!

CODE
var airTimeUTC = new Date("January 1, 2017 17:00:00 UTC");
var airTimeEpoch = airTimeUTC.getTime();

var localAirTime = new Date(airTimeEpoch);
alert(localAirTime.toString() + '\n' + localAirTime.toLocaleString());


I set the time to the next whole hour (at the time of writing). I'm in Sweden (GMT +1) and I get the below result. The second line is my preferred format and the first the standard one. If you want to format it another way you can do so by picking the time and date apart with getHours(), getMinutes() and so on.

CODE
Sun Jan 01 2017 18:00:00 GMT+0100 (Romance Standard Time)
2017-01-01 18:00:00


If you want to use this for something else, note that epoch time is in seconds, but JavaScript uses milliseconds for some reason, so often one needs to calculate with a factor 1000, but that isn't needed here.

Also, when I needed this I googled long and hard and didn't find this solution anywhere. I can't think I'm the only one who has thought of this since it's so very simple, so there may be something fishy with it. On the other hand, then I should have found something about the fishiness but I didn't do that either. Anyway, it has worked for me. unsure.gif
bluffwood
I'm thinking it looks elegant, and might well do.

If I may bore you with a little background. I was a developer in the early 80s, and responsible for what became the ping command on three platforms.... this was before the invention of the pc, and before the announcement of the Internet. It was written in "c" in a version developed by the university of Waterloo (Ontario, Canada). C was so new, I think there was only one book, by the developers Kernihan & Ritchie. I had been a "b" programmer. The very first "C" compiler was written in "b"

so much for the ancient history.

Now my request, because I'm really quite stumped still. Can this script be made into a function that is callable, giving it the time of day in UTC and getting the time back as a text string, in AM/PM format?

I know you're probably thinking, "I did almost all that already!" and yes, wow, you found a solution to a problem which would be quite handy to many webpage developers, that no one ever thought of solving.

The fact it doesn't work (at first) on all browsers or worse, if it works differently on browsers, that's the typically nutty world of browsers I've encountered again and again.

Your continued assistance would be gratefully received, as I'm long out of the world of developers.

QUOTE(pandy @ Jan 1 2017, 11:54 AM) *

Will JavaScript suffice?

If I've understood this half right it should be really simple, but it isn't. This is what we SHOULD be able to do, take a UTC time and convert it to local time, but it doesn't work in (most?) browsers.

CODE
var airTime = new Date('2016-01-01 17:00:00 UTC');
var localAirTime = airTime.toLocaleString();
alert(localAirTime);


toString() automatially converts to local date but JavaScript chokes on the date format. Because of this problem there's a lot of JavaScript time libraries around. You can google for that.

I discovered that it works just fine if you convert the date and time to epoch time.
https://en.wikipedia.org/wiki/Unix_time

You do that with getTime(). Then you can get it back to a normal time format in different ways. You want the user's local date and time, so you could either use toString() which will produce the standard format or you could use toLocaleString() which will produce the format the user has chosen for his machine.

Note that you need to use UTC and not your local time for the airing times!

CODE
var airTimeUTC = new Date("January 1, 2017 17:00:00 UTC");
var airTimeEpoch = airTimeUTC.getTime()

var localAirTime = new Date(airTimeEpoch);
alert(localAirTime.toString() + '\n' + localAirTime.toLocaleString());


I set the time to the next whole hour (at the time of writing). I'm in Sweden (GMT +1) and I get the below result. The second line is my preferred format and the first the standard one. If you want to format it another way you can do so by picking the time and date apart with getHours(), getMinutes() and so on.

CODE
Sun Jan 01 2017 18:00:00 GMT+0100 (Romance Standard Time)
2017-01-01 18:00:00


If you want to use this for something else, note that epoch time is in seconds, but JavaScript uses milliseconds for some reason, so often one needs to calculate with a factor 1000, but that isn't needed here.

Also, when I needed this I googled long and hard and didn't find this solution anywhere. I can't think I'm the only one who has thought of this since it's so very simple, so there may be something fishy with it. On the other hand, then I should have found something about the fishiness but I didn't do that either. Anyway, it has worked for me. unsure.gif

pandy
Yeah, that can be done. But do you want them to click a link? I thought you wanted the times displayed on the page to start with? Either way can be done.

And when they click, what should happen? A popup with the time table? The times displayed somewhere on the page?

The format would be AM/PM if that's what's used where the user lives. Here we use a 24 hour clock so that's what I get. It's all happening on the user's machine. Don't you get a a AM/PM time if you runt the script?

I'm off googling that "B"... happy.gif
Is B the reason C is called C BTW?
pandy
Well, I tried to do something according to your first description. If I converted your, to me, confusing time zones to UTC correctly this should convert them back your time zone. See if it works.

CODE

function doLocalTime()
{
   // First airtime
   var airTimeUTC_1 = new Date('January 1, 2017 17:00:00 UTC');
   var airTimeEpoch_1 = airTimeUTC_1.getTime();
   var localAirTime_1 = new Date(airTimeEpoch_1);
   var hour_1 = localAirTime_1.getHours();

   // Second airtime
   var airTimeUTC_2 = new Date('January 1, 2017 13:00:00 UTC');
   var airTimeEpoch_2 = airTimeUTC_2.getTime();
   var localAirTime_2 = new Date(airTimeEpoch_2);
   var hour_2 = localAirTime_2.getHours();

   // One line for each airtime
   document.getElementById('airing_1').innerHTML = hour_1;
   document.getElementById('airing_2').innerHTML = hour_2;
}

window.onload = doLocalTime;



HTML
<div>
Sunday <span id="airing_1"></span> on station A<br>
Sunday <span id="airing_2"></span> on station B
</div>


That could probably be written more elegantly to avoid repeating code, but it would be a more involved with loops and harder to follow for you. And after all there are only 5 times to deal with, not hundreds. And mainly, I don't want to do it. Christian is welcome to if he wants to. tongue.gif
You can format the HTML as you please. It needn't be a DIV. The only important bit is the ID and an suitable element to hang it on. As you see the SPAN is empty before JS fills it with the time.

I think it will always be Sunday in all the American zones when the show airs. If not, well, this won't work.

I only did the first two times. Note that the date in the UTC time stamp doesn't matter, you can leave it like that and only change the time. We will only pick the hours out, but it needs to be formatted like that, the full date, time and time zone thing.

There is a problem though. JavaScript can't get the time zone, that is it can't get the name of it even if it uses named zones. A very peculiar fact. It an get the offset from UTC, but that would just look fishy. If you absolutely need that you should go for those libraries I mentioned. I think they can do it. Don't know how, maybe it's AJAX mojo. wacko.gif

One could take the offset and manually translate them to the corresponding zone, like -6 would be MT. But then what if someone like me comes along that isn't even in the US? Not good.

One option would be to list the times in the local time for the station as you do now and add the user's local time after. Personally I could live with that. Maybe it would even be a good thing to show both times. Come to think of it, I think I like this the best. Something like this.

CODE
Saturday Noon CT (<span id="airing_1"></span> in your local time) on station A


Actually, if you choose this option you should put the whole parenthesis in the JavaScript, so users without JS don't have to see any broken stuff. Like this.

CODE
document.getElementById('airing_1').innerHTML = '(' + hour_1 + ' in your local time)';


HTML
Sunday Noon CT <span id="airing_1"></span> on station A<br>



Note to self (and maybe Christian). Already new Date(airTimeEpoch) converts the time to local time. Luckily for me. wink.gif
pandy
Oh #%&! If course there's something I didn't think about. The date does matter. For the darn daylight saving. sad.gif

Well, that can be fixed with a little addition. But I wait with that until you've looked at it.
bluffwood
QUOTE(pandy @ Jan 2 2017, 05:20 PM) *

Yeah, that can be done. But do you want them to click a link? I thought you wanted the times displayed on the page to start with? Either way can be done.

And when they click, what should happen? A popup with the time table? The times displayed somewhere on the page?

The format would be AM/PM if that's what's used where the user lives. Here we use a 24 hour clock so that's what I get. It's all happening on the user's machine. Don't you get a a AM/PM time if you runt the script?

I'm off googling that "B"... happy.gif
Is B the reason C is called C BTW?


no clicks. Just want to display the static information based on local time, including dst. If I understand this right, I need to enter it in GMT/UCT and the time inputted to the funct would change twice a year, for Northern Hemisphere, and twice a year, for Southern Hermisphere, except where stations are in non dst areas.

so, no clicks, just a display of times (not days or dates) in multiple places.

B language https://www.bell-labs.com/usr/dmr/www/bintro.html

written by one of the designers of C.

B was typeless. C is not.

And yes, I believe C was called C because it comes after B
pandy
So does what I posted above work for you?
pandy
This was quite fun and something that I could have use for at some point. I think I've solved the DS problem.

Christian, could you check if you see any fault with it, please? It's the DS stuff I'm concerned about, the bit between the list of months and the airing times. It's hard to test without changing the computer clock all the time and confusing yourself silly...

My thinking was this. Get users weekday, figure out how many days to Sunday and add that number to the *date*. Since JavaScript automatically converts to a date in the next month if the number is higher than the amount of days of the current month this should work. And does as far as I could be bothered to test. I hardcoded dates that would give a day above 31 and it got it right. But is there something I haven't thought about?

The end result should (hopefully) be a the correct date for the coming Sunday and thus the time would automatically be corrected for DS.

This is tricky stuff! I thought I had it several times and then things like that what is now called utcdate was the user's local date and needed to be converted to UTC dawned on me. It's so darn' much to keep track of with date and time and so hard to test.

Phew! ninja.gif



CODE

function doLocalTime()
{
   var months = new Array(12);
   months[0] = 'January';
   months[1] = 'February';
   months[2] = 'March';
   months[3] = 'April';
   months[4] = 'May';
   months[5] = 'June';
   months[6] = 'July';
   months[7] = 'August';
   months[8] = 'September';
   months[9] = 'October';
   months[10] = 'November';
   months[11] = 'December';



   // First get the user's local date to get the time zone right
   var date = new Date();

   // Change it to the next sunday
   var wday = date.getDay();
   var toSunday = 7 - wday; // How many days to Sunday
   var sunDate = date.getDate() + toSunday; // calculate date accordingly
   date.setDate(sunDate); // and set the date to that


   // Get the UTC date out of it
   var y = date.getUTCFullYear();
   var m = date.getUTCMonth();
   var d = date.getUTCDate();
   var utcdate = m + ' ' + d + ', ' + y;



   // Airing times from UTC to local
   // First airtime
   var airTimeUTC_1 = new Date(utcdate + ' 17:00:00 UTC'); // Enter UTC time here!
   var airTimeEpoch_1 = airTimeUTC_1.getTime(); // Converts to Epoch
   var localAirTime_1 = new Date(airTimeEpoch_1); // Gets the local date and time
   var hour_1 = localAirTime_1.getHours(); // Gets the hour out

   // Second airtime
   var airTimeUTC_2 = new Date(utcdate + ' 13:00:00 UTC'); // Enter UTC time here!
   var airTimeEpoch_2 = airTimeUTC_2.getTime();
   var localAirTime_2 = new Date(airTimeEpoch_2);
   var hour_2 = localAirTime_2.getHours();

   // One line for each airtime
   document.getElementById('airing_1').innerHTML = '(' + hour_1 + ' in your local time)';
   document.getElementById('airing_2').innerHTML = '(' + hour_2 + ' in your local time)';
}

window.onload = doLocalTime;


HTML
<div>
Sunday Noon CT <span id="airing_1"></span> on station A<br>
Sunday 7am MT <span id="airing_2"></span> on station B
</div>
bluffwood
that's a lot of lines. Now walk me thru it like I'm a dummy. Where does the function code go? in the <head></head> or at the end of the body?

QUOTE(pandy @ Jan 4 2017, 11:45 AM) *

This was quite fun and something that I could have use for at some point. I think I've solved the DS problem.

Christian, could you check if you see any fault with it, please? It's the DS stuff I'm concerned about, the bit between the list of months and the airing times. It's hard to test without changing the computer clock all the time and confusing yourself silly...

My thinking was this. Get users weekday, figure out how many days to Sunday and add that number to the *date*. Since JavaScript automatically converts to a date in the next month if the number is higher than the amount of days of the current month this should work. And does as far as I could be bothered to test. I hardcoded dates that would give a day above 31 and it got it right. But is there something I haven't thought about?

The end result should (hopefully) be a the correct date for the coming Sunday and thus the time would automatically be corrected for DS.

This is tricky stuff! I thought I had it several times and then things like that what is now called utcdate was the user's local date and needed to be converted to UTC dawned on me. It's so darn' much to keep track of with date and time and so hard to test.

Phew! ninja.gif



CODE

function doLocalTime()
{
   var months = new Array(12);
   months[0] = 'January';
   months[1] = 'February';
   months[2] = 'March';
   months[3] = 'April';
   months[4] = 'May';
   months[5] = 'June';
   months[6] = 'July';
   months[7] = 'August';
   months[8] = 'September';
   months[9] = 'October';
   months[10] = 'November';
   months[11] = 'December';



   // First get the user's local date to get the time zone right
   var date = new Date();

   // Change it to the next sunday
   var wday = date.getDay();
   var toSunday = 7 - wday; // How many days to Sunday
   var sunDate = date.getDate() + toSunday; // calculate date accordingly
   date.setDate(sunDate); // and set the date to that


   // Get the UTC date out of it
   var y = date.getUTCFullYear();
   var m = date.getUTCMonth();
   var d = date.getUTCDate();
   var utcdate = m + ' ' + d + ', ' + y;



   // Airing times from UTC to local
   // First airtime
   var airTimeUTC_1 = new Date(utcdate + ' 17:00:00 UTC'); // Enter UTC time here!
   var airTimeEpoch_1 = airTimeUTC_1.getTime(); // Converts to Epoch
   var localAirTime_1 = new Date(airTimeEpoch_1); // Gets the local date and time
   var hour_1 = localAirTime_1.getHours(); // Gets the hour out

   // Second airtime
   var airTimeUTC_2 = new Date(utcdate + ' 13:00:00 UTC'); // Enter UTC time here!
   var airTimeEpoch_2 = airTimeUTC_2.getTime();
   var localAirTime_2 = new Date(airTimeEpoch_2);
   var hour_2 = localAirTime_2.getHours();

   // One line for each airtime
   document.getElementById('airing_1').innerHTML = '(' + hour_1 + ' in your local time)';
   document.getElementById('airing_2').innerHTML = '(' + hour_2 + ' in your local time)';
}

window.onload = doLocalTime;


HTML
<div>
Sunday Noon CT <span id="airing_1"></span> on station A<br>
Sunday 7am MT <span id="airing_2"></span> on station B
</div>


bluffwood
QUOTE(pandy @ Jan 2 2017, 09:36 PM) *

That could probably be written more elegantly to avoid repeating code, but it would be a more involved with loops and harder to follow for you. And after all there are only 5 times to deal with, not hundreds. And mainly, I don't want to do it. Christian is welcome to if he wants to. tongue.gif
You can format the HTML as you please. It needn't be a DIV. The only important bit is the ID and an suitable element to hang it on. As you see the SPAN is empty before JS fills it with the time.


if by 5 times, you mean 5 stations? That's not fixed. It's going to grow.

QUOTE
I think it will always be Sunday in all the American zones when the show airs. If not, well, this won't work.


We have one station airing on Saturday already, but they don't stream so it wouldn't be on the list

But I'm confused why day of the week enters into this. Sure, if it plays in New Zealand 12 hours ahead of us, it airs tomorrow (or very late tonight) but the day of week would always be fixed. Simply in the text. Not really relevant to the local time.

I only did the first two times. Note that the date in the UTC time stamp doesn't matter, you can leave it like that and only change the time. We will only pick the hours out, but it needs to be formatted like that, the full date, time and time zone thing.

QUOTE
There is a problem though. JavaScript can't get the time zone, that is it can't get the name of it even if it uses named zones. A very peculiar fact. It an get the offset from UTC, but that would just look fishy. If you absolutely need that you should go for those libraries I mentioned. I think they can do it. Don't know how, maybe it's AJAX mojo. wacko.gif


Don't need the name of the timezone or the +/- UCT. presuming it's local time unless they're sneaking around with a fake location via a vpn.

QUOTE
One option would be to list the times in the local time for the station as you do now and add the user's local time after. Personally I could live with that. Maybe it would even be a good thing to show both times. Come to think of it, I think I like this the best. Something like this.

CODE
Saturday Noon CT (<span id="airing_1"></span> in your local time) on station A

yes, I quite like that idea.

QUOTE

Note to self (and maybe Christian). Already new Date(airTimeEpoch) converts the time to local time. Luckily for me. wink.gif

pandy
QUOTE(bluffwood @ Jan 4 2017, 06:33 PM) *

if by 5 times, you mean 5 stations? That's not fixed. It's going to grow.


Ok, but it won't be so many that it would be a bother to edit the script as it is, I think?

QUOTE

QUOTE
I think it will always be Sunday in all the American zones when the show airs. If not, well, this won't work.


We have one station airing on Saturday already, but they don't stream so it wouldn't be on the list


Good. Cause I don't think I would be able to figure that one out.

QUOTE

But I'm confused why day of the week enters into this. Sure, if it plays in New Zealand 12 hours ahead of us, it airs tomorrow (or very late tonight) but the day of week would always be fixed. Simply in the text. Not really relevant to the local time.


It's just to be able to calculate the date of the coming Sunday. If we know the day of the week we also know how many days it is to Sunday. And that number can be added to the date so we get the correct date and JS will know if DS should be used or not. As it is now the correct UTC date is in the utcdate variable. That way JavaScript will use DS if it's in use the coming Sunday. Before I thought of that and the same date was used all the time, DS would be used according to that fixed date and not the date of the coming Sunday. I said this is confusing!

Say DS was to be turned off the coming night to Sunday (as it will happen towards summer). Someone goes to your site on Saturday to check when the show airs the next day. Without the correct date for the Sunday he would get the time with DS as it's still in use on Saturday if we used his local date and if we used a fixed date it would be even worse. When the date used is that for the actual Sunday JS knows not to use DS. I hope! tongue.gif

QUOTE
Don't need the name of the timezone or the +/- UCT. presuming it's local time unless they're sneaking around with a fake location via a vpn.


I know. But we need a correctly formatted date for JS to be able to handle it, can't leave things out.


QUOTE
QUOTE
One option would be to list the times in the local time for the station as you do now and add the user's local time after. Personally I could live with that. Maybe it would even be a good thing to show both times. Come to think of it, I think I like this the best. Something like this.

CODE
Saturday Noon CT (<span id="airing_1"></span> in your local time) on station A

yes, I quite like that idea.


I'm glad. Living in Sweden I get get this localization crap all the time. Getting pages translated to (poor) Swedish without an option to read them in English is the worst case. Always let the user have a choice, I say. In your case, a person could very well live in one time zone and work in another. If he looks the airing time up from work during the week he would get the time in that time zone, not the time at home where he'll be listening. So good to have both, I think.



If you want to use it, you just need to edit in three places.

1. Add a new airtime block. All you need to do here is to copy a block and edit the hour in UTC time (I guess I could have automated the conversion, but I leave it to you do look the correct UTC times up) and change the numbers in the variable names (the third could use 3 and so on). Clever of me to use numbers, wasn't it? laugh.gif

Note the space before the time stamp in ' 17:00:00 UTC'.

// First airtime
var airTimeUTC_1 = new Date(utcdate + ' 17:00:00 UTC'); // Enter UTC time here!
var airTimeEpoch_1 = airTimeUTC_1.getTime(); // Converts to Epoch
var localAirTime_1 = new Date(airTimeEpoch_1); // Gets the local date and time
var hour_1 = localAirTime_1.getHours(); // Gets the hour out

2. Add another line with what should be injected in the HTML. Again, edit the number in the variable and also the number in the id. The id is in the parentheses and is used in the SPAN tag in the HTML. This is what lets JS know *where* it should put the stuff.

document.getElementById('airing_1').innerHTML = '(' + hour_1 + ' in your local time)';

3. Lastly add another snip to the HTML. Edit the number in the name of the id and also the hard coded bits.
Sunday Noon CT <span id="airing_1"></span> on station A

So it's quite easy. Just copy and change the numbers. As said, you can format the HTML as you please. Want it in a table, put it in a table. The converted hour will turn up where the SPAN with the corresponding ID is.



Just hope I haven't missed something. As said, it's tricky, this. Don't shoot me if something goes wrong on leap day or something like that! unsure.gif
pandy
QUOTE(bluffwood @ Jan 4 2017, 06:19 PM) *

that's a lot of lines. Now walk me thru it like I'm a dummy.

Tried to.

QUOTE
Where does the function code go? in the <head>

But I missed this. Yes, in a code block in HEAD.

CODE
<script type="text/javascript">
// Script here
</script>


Or, even better, you put the script in a separate file, name it whatever.js and link to it in HEAD, like this.

CODE
<script type="text/javascript" src="path/to/whatever.js"></script>

Christian J
QUOTE(pandy @ Jan 4 2017, 05:45 PM) *

Christian, could you check if you see any fault with it, please?

No, I can't think anymore. sad.gif But doesn't the daylight savings time change automatically on the user's computer (at least in Windows)?
pandy
Yes, that's the hole point. I convert UTC time to epoch to be able to get local time. DS should work provided the correct date in the user's time zone is used. Unless I've missed something. My brain got a little overheated from all the conversions so I don't fully trust it. sleep.gif
pandy
Oops! The array with all the months isn't needed. It's a leftover from my first attempt. blush.gif

You can get rid of this.

CODE
   var months = new Array(12);
   months[0] = 'January';
   months[1] = 'February';
   months[2] = 'March';
   months[3] = 'April';
   months[4] = 'May';
   months[5] = 'June';
   months[6] = 'July';
   months[7] = 'August';
   months[8] = 'September';
   months[9] = 'October';
   months[10] = 'November';
   months[11] = 'December';
pandy
So did it work for you? unsure.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.