XF 1.5 Custom Sidebar Block with Current Date and Time

[Amaury]

I've created a custom sidebar block to be used to display the current date and time with respect to the user's selected time zone or the time zone set for guests. I may end up changing it to two separate blocks for aesthetics reasons, but all the same, really.

Anyway, I'm not able to get it to work, so I am obviously doing something wrong. This is my current setup:





As you can see below, it doesn't work:



What am I doing wrong? Thanks.

Edit: A mock-up of what I'm trying to achieve.

 

[Amaury]

The date and time wouldn't be classed as statistics, which is a collection of data (in this case from your forum).

I'll have to think of something else, then, or not include them at all if I can't get something to work.

I think that date and time in the stats block is completely lost in there. Presumably you're wanting to show users what the date and time are? I doubt many will notice it there.

While I realize this isn't vBulletin, I think the same could be said for its location of the current time.

 

[Amaury]

@Martok, @Lisa, I think this will work for now.



I was going to try the breadcrumbs so it would show on every page, but I couldn't get it to work, and I don't think the footer is very noticeable.

Edit: Do you think it looks better with or without a heading? I mean, people should be able to tell it's the current date/time.

 

[Martok]

I heading isn't needed.

The date format is still rubbish.

 

[Amaury]

You might feel different if you were born or lived in the US.

 

[Martok]

You might feel different if you were born or lived in the US.

Well I'm not an nor are 96% of the world population. Europe has 12% of the world's population compared to the US's 4.4%. You might therefore want to consider your members outside of your borders and choose a more international friendly format. Even February 7 2016 is more preferable internationally than 2/7/2016.

 

[Lisa]

I agree about the date, I'd go with a more clear format - we don't all look at it month, day, year... to me that date is 2nd June 2016.

 

[Amaury]

I would think it's clear that it's month, day, and year based on the other dates around the forum where the day is between 13 and 31. However, for the current date, there's an extremely high chance I will take you guys up on your suggestions. This style won't be out until August 30 at the latest, so there's still plenty of time.

Although most of our legit members, and I realize we're not a big forum (95 members), are from the US. Only a small percentage are not. I can't get an exact count right now simply because I'm not 100% on everyone, but a few are from the UK and a few are from Australia.

 

[Lisa]

I would think it's clear that it's month, day, and year based on the other dates around the forum where the day is between 13 and 31

Since that's probably going to be the first date they notice, it won't be clear at all - it's a first glance thing.

 

[Amaury]

 

[Amaury]

@Nights and I are working on the style, and he liked the current date and time I added and came up with the idea of making it a working clock so the forum list or homepage don't need to be refreshed for the time to change. The date would also automatically change when the time goes from 11:59 PM to 12:00 AM.

We're pretty sure this can be done with JavaScript, but neither of us is really good with JavaScript, and our other administrator who is, @mike406, is currently busy and doesn't really have the time.

I don't think it should be too hard. We just don't really know how to achieve it:

[2:39:11 PM] Jordan: If you could find the right javascript, you could actually make it a working clock. Keeping time live.
[2:39:26 PM] Amaury: You mean without having to refresh?
[2:39:31 PM] Jordan: Yes.
[2:40:04 PM | Edited 2:58:31 PM] Amaury: Hm. Sounds like a question for Mike, but since he's busy I may ask XF.
[2:40:46 PM | Edited 2:40:46 PM] Amaury: Would the script also change the date when it goes from 11:59 PM to 12:00 AM?
[2:41:31 PM] Jordan: You can do anything with java, it's just finding someone who can work with it that would be the problem. It would have to figure out the users local time to load and then keep track from there.
[2:42:51 PM | Edited 2:43:00 PM] Amaury: Hm. What I have there already is based on the time zone set in the user's preferences.
[2:43:22 PM] Jordan: What code did you use?
[2:44:04 PM | Edited 2:44:19 PM] Amaury: Customized Components > current_date_and_time
[2:44:34 PM] Amaury: Under K.
[2:45:16 PM] Amaury: And, of course, guests see the time zone set in the ACP options.
[2:45:47 PM] Jordan: Hmm, yeah I'd have no idea how to get that working. It'd definitely be a question for Mike or XF. I'm sure someone's already done it.

Any help will be more than appreciated!

 

[Lukas W.]

<script>
// Add leading zeros
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

// Count time
function startTime() {
    // Fetch time
    var datetime = new Date();
    var h = datetime.getHours();
    var m = datetime.getMinutes();
    var s = datetime.getSeconds();

    // AM-PM Conversion
    if (h-12 > 0) {var ap = ' pm'} else {var ap = ' am'};
    h = h%12;

    // Leading Zeros
    m = checkTime(m);
    s = checkTime(s);

    // Add to #container
    $('#container').html(h + ":" + m + ":" + s + ap);

    // Recursive Call
    var t = setTimeout(startTime, 500);
}

$('document').ready(function() {
    startTime();
});
</script>

The above will show and refresh the users local time. Is that okay?

This one might display the correct server time, haven't really tested it to be honest:

Spoiler

Make sure serverTime is assigned inside a XenForo template. Rest can be stored away into a .js-File.

<script>
    var serverTime = {$serverTime};
    var localTime = new Date();
    var timeDifference = serverTime - localTime;

// Add leading zeros
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}

// Count time
function startTime() {
    // Fetch time
    var datetime = new Date();
    datetime.setTime(datetime.getTime() + timeDifference);
    var h = datetime.getHours();
    var m = datetime.getMinutes();
    var s = datetime.getSeconds();

    // AM-PM Conversion
    if (h-12 > 0) {var ap = ' pm'} else {var ap = ' am'};
    h = h%12;

    // Leading Zeros
    m = checkTime(m);
    s = checkTime(s);

    // Add to #container
    $('#container').html(h + ":" + m + ":" + s + ap);

    // Recursive Call
    var t = setTimeout(startTime, 500);
}

$('document').ready(function() {
    startTime();
});
</script>

 

[Amaury]

The above will show and refresh the users local time. Is that okay?

So that will essentially work the same as what I have now then, with the addition of the auto-refresh, it seems. The time depends on what's set in users' preferences and guests will see whatever's set as the time zone for guests in the ACP.

And this would be placed in the same template that I created for the date and time, correct?

I'll also notify Nights.

 

[Lukas W.]

So that will essentially work the same as what I have now then, with the addition of the auto-refresh, it seems. The time depends on what's set in users' preferences and guests will see whatever's set as the time zone for guests in the ACP.

The time of the first script is actually the time of the users machine, so it might differ from his preferences and definitly differ if the guest is not in the time zone of your server. The second code should use the time you want (but I haven't really tested it, so give it a test shot).

And this would be placed in the same template that I created for the date and time, correct?.

Well, you could actually place it anywhere you like, even in an external .js-File, just make sure to alter $('#container') to select the right element (Selector in italic is the same as selectors you know from css). If you're using the second script, make sure to have var serverTime = {$serverTime}; is inside a XenForo Template (cause it's using a XenForo Template Variable). The rest can also be stored anywhere.

 

[megabosx]

The $serverTime variable doesn't seem to be available in the sidebar template context