The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> display a day and time in localized timezone, in text, a fixed day/time
bluffwood
post Dec 31 2016, 07:33 AM
Post #1





Group: Members
Posts: 6
Joined: 31-December 16
Member No.: 24,986



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Dec 31 2016, 08:04 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bluffwood
post Dec 31 2016, 09:18 PM
Post #3





Group: Members
Posts: 6
Joined: 31-December 16
Member No.: 24,986



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 1 2017, 11:54 AM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bluffwood
post Jan 2 2017, 03:17 PM
Post #5





Group: Members
Posts: 6
Joined: 31-December 16
Member No.: 24,986



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 2 2017, 05:20 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 2 2017, 09:36 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 2 2017, 10:06 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
bluffwood   display a day and time in localized timezone   Dec 31 2016, 07:33 AM
Christian J   With a server-side script (e.g. PHP) you can get t...   Dec 31 2016, 08:04 AM
bluffwood   With a server-side script (e.g. PHP) you can get ...   Dec 31 2016, 09:18 PM
pandy   Will JavaScript suffice? If I've understood t...   Jan 1 2017, 11:54 AM
bluffwood   I'm thinking it looks elegant, and might well ...   Jan 2 2017, 03:17 PM
pandy   Yeah, that can be done. But do you want them to cl...   Jan 2 2017, 05:20 PM
pandy   Well, I tried to do something according to your fi...   Jan 2 2017, 09:36 PM
pandy   Oh #%&! If course there's something I ...   Jan 2 2017, 10:06 PM
bluffwood   That could probably be written more elegantly to ...   Jan 4 2017, 12:33 PM
pandy   if by 5 times, you mean 5 stations? That's no...   Jan 4 2017, 01:19 PM
bluffwood   Yeah, that can be done. But do you want them to c...   Jan 4 2017, 08:57 AM
pandy   So does what I posted above work for you?   Jan 4 2017, 09:51 AM
pandy   This was quite fun and something that I could have...   Jan 4 2017, 11:45 AM
bluffwood   that's a lot of lines. Now walk me thru it li...   Jan 4 2017, 12:19 PM
pandy   that's a lot of lines. Now walk me thru it l...   Jan 4 2017, 01:33 PM
Christian J   Christian, could you check if you see any fault w...   Jan 4 2017, 04:01 PM
pandy   Yes, that's the hole point. I convert UTC time...   Jan 4 2017, 04:45 PM
pandy   Oops! The array with all the months isn't ...   Jan 4 2017, 08:37 PM
pandy   So did it work for you? :unsure:   Jan 7 2017, 06:14 PM


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2024 - 10:51 PM