Timezone Clock

Here's how to make it display 12hr clock time. - Timezone Clock

Here's how to make it display 12hr clock time.

by ctrstudio » Wed Jan 15, 2020 12:36 am

----------------------------------------------------------
Update - 21 Jan, 2020:
I spent a bit more time to make this work as an admin selectable 12/24 option in the ACP. I also added a refresh to keep the times current in the timeclock display bar. I submitted the changes to the author, so the 12/24 option and auto refreshing times are now included as features in version 1.3.0_RC1. -ctrstudio
----------------------------------------------------------


I wanted to change the format to display a 12hr clock time instead of the 24 hour format, so I looked at the code in TimezoneClock version 1.2.0 to figure out how to adjust it in the js code.

Since I got it working for me, I thought I'd share my changes in case it can help anyone else.
This is what I did to set TimezoneClock version 1.2.0 for display of 12hr clock time.

Edit the code in "/hifikabin/timezoneclock/styles/prosilver/template/js/clock.js" file to make the following changes. (Be sure to make a backup just in case...)

Code: Select all

Find:  
	var dst = 0;

Insert these lines before it:
	var tzcfmt = 1;  // set to "0" for 24hr, or "1" for 12hr clock
	var mrdm = "";

---------------------------------------------------------------------------------
Find:
		return monthArray[month] + "  " + hr + ":" + min + " ●";

Replace with:
		if (tzcfmt == 1) {
			if (hr < 12) {mrdm = "&#x02009;AM"; };
			if (hr >= 12) {mrdm = "&#x02009;PM"; };
			if (hr >= 13) {hr = hr - 12; };
			if (hr == 0) {hr = 12; };
			return  hr + ":" + min + mrdm;
		} else {
			return  hr + ":" + min + " ●";
		};
		
---------------------------------------------------------------------------------
Find:

		return monthArray[month] + "  " + hr + ":" + min;

Replace with:
		if (tzcfmt == 1) {
			if (hr < 12) {mrdm = "&#x02009;am"; };
			if (hr >= 12) {mrdm = "&#x02009;pm"; };
			if (hr >= 13) {hr = hr - 12; };
			if (hr == 0) {hr = 12; };
			return  hr + ":" + min + mrdm;
		} else {
			return  hr + ":" + min;
		};

Then you can just edit the "var tzcfmt" value to change the initial value between 0 or 1 depending on format desired.
Be sure to clear the cache in the phpbb ACP General tab after making any changes to the file.

A toggle could probably be added to set the value in the extension control panel instead, but it wasn't necessary for me to do that for just a single forum install.

Here are a few notes about my changes.
"var tzcfmt" sets the time format to 24hr or 12hr clock time.
"var mrdm" is for display of the meridiem (am/pm).
"&#x02009;" is for a halfspace between time and meridiem (you can replace it with a regular space if you prefer).

DST is marked by ● for 24 hr format.
DST is marked by AM/PM and NotDST is marked by am/pm for 12hr format.

I hope this hack might help anyone else that would prefer a 12hr clock time display. :)

Also, Thanks to the extension author for making a cool extension.
Last edited by ctrstudio on Sat Jan 25, 2020 11:39 pm
User avatar
ctrstudio
Registered User
Posts: 58
Joined: Wed Jan 01, 2020 4:32 am
Name: C. T. Ransbury
Contact:

Re: Changing Timezone Clock bar to 12hr clock format

by HiFiKabin » Wed Jan 15, 2020 10:01 am

An excellent addition for those who prefer a 12 hour clock. Thank you.
User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 5027
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact: