Show specific time

[pitszal]

Feb 22, 2013 20:04:01 GMT -8 Chris said:

You're probably aware that you can hover over that "19 hours ago" and get the full date and time so I am thinking you don't even want to have to do that just have it not display elapsed time. Drop this old-style script in your global footer and see if it does what you want




code:

<script type="text/javascript">
/* Replace elapsed time with specific time */
$(function(){
	for(var a=0, timeID=null; a < $.livequery.queries.length; a++){
		if($.livequery.queries[a].selector == "abbr.time" && "function" == typeof $.livequery.queries[a].fn && $.livequery.queries[a].fn.toString().indexOf("non_mod_date") != -1)
		{	timeID = $.livequery.queries[a].id; $.livequery.stop(timeID); break; }
	}
	$('abbr.time').not('.shoutbox-post abbr.time').each(function () {
		var time = $(this).addClass('modified_time').removeClass('time'), raw_date = new Date(parseInt(time.data("timestamp"),10));
		//this.className += " time"
		if($(this).hasClass('recent_time') && !/yesterday/i.test($(this).text())){	
			time = time.removeClass('recent_time');
			var  today = raw_date.getDate() == (new Date()).getDate()?"today":"yesterday",
			user_date = ['M d, yy', 'd M, yy'][proboards.data("time_style") || 0];
			time.replaceWith(
				$(this).clone(true).addClass('recent_time')
				.html(
					'<span class="'+today+'">'+today+' </span>'
					 + '<span class="at">at</span> <span class="at-time">' +
					(proboards.data('military_time') ? $.formatTime('HH:mm', raw_date) : $.formatTime('h:mmp', raw_date))
					+'</span>'
				)
			);
		}else if(/yesterday/i.test($(this).text())){
			time.replaceWith(
			$(this).clone(true)
			.html(
				'<span class="yesterday">yesterday </span><span class="at">at </span><span class="at-time">' 
				+ $(this).text().split("at ")[1] 
				+'</span>'
			)
			)
		}else{
			if(time.text().indexOf(" at ")== -1)
				time.text($.datepicker.formatDate((proboards.data('time_style') ? 'd M yy' : 'M d, yy'), raw_date) + ' at ' + $.formatTime((proboards.data('military_time') ? 'HH:mm' : 'h:mmp'), raw_date))
			time.replaceWith(function(){
				for(var dt = time.text().split(" at")[0], a = dt.split(/,?\s+/), b=0, c = $('<span></span>'); b<a.length; b++){
					if((d = a[b].match(/^(\d+)$/))){
						if(d[1].length == 4)
							c.append('<span class="year">'+a[b]+' </span>').addClass("year_"+a[b]);
						else
							c.append('<span class="day">'+a[b]+' </span>').addClass("day_"+a[b])
					}else{
						c.append('<span class="month">'+a[b]+' </span>').addClass("month_"+a[b])
					}
				}
				c.append('<span class="at">at </span>').append('<span class="at-time">' + time.text().split(" at ")[1] + '</span>')
				return time.clone(true).html('').append(c)
			})
		}

	})
	$('abbr.modified_time').addClass('time');
	var ac = arguments.callee
	if(!ac.func){ ac.func = function(){$.livequery.run(timeID); ac();} }
	if($.inArray(ac.func, proboards.events.afterSearch) == -1){ proboards.on("afterSearch", ac.func); }
})
</script>

By the way (for those interested) in addition to the "time" and "recent_time" classes added by Proboards this code also adds new classes for flexible targeted styling:

"modified_time"
"today"
"yesterday"

as well as classes to target sub-components or specific values of the date

"at-time"
"at"
"year"
"month"
"day"
"day_#" (dates with a specific day of the month)
"month_XXX" (dates of a specific month)
"year_####" (dates of a specific year)

example: to target dates referring to Valentines Day
.day_14.month_Feb::after {
content: url(heart.png);
}

Updates:

• May 10, 2013 - addressed today/yesterday bug
• June 8, 2013 - addressed a timing issue that rendered the code inoperable
• June 10, 2013 - added pagination support and addressed some minor bugs

Previous Code versions

SPOILER: Click to show

These older versions of the code are not recommended since they contain bugs that have been addressed in the newest version posted above

SPOILER: Click to show

OLD CODE
<script type="text/javascript">
$('abbr.time').expire();
$('abbr.recent_time').each(function(){
var time = $(this),
raw_date = new Date(time.data("timestamp"))
//clone to circumvent uncancellable timeouts
time.replaceWith(
$(this).clone()
.text(
$.datepicker.formatDate('M d, yy', raw_date)
+' at '+
(proboards.data('military_time') ? $.formatTime('HH:mm', raw_date) : $.formatTime('h:mmp', raw_date))
)
);
})
</script>

SPOILER: Click to show

I made a small change so the format of the date matches the format the member has selected in their profile

OLD CODE
<script>
$('abbr.time').expire();
$('abbr.recent_time').each(function () {
var time = $(this),
raw_date = new Date(time.data("timestamp")),
user_date = ['M d, yy','d M, yy'][proboards.data("time_style")||0];
//clone to circumvent uncancellable timeouts
time.replaceWith(
$(this).clone()
.text(
$.datepicker.formatDate(user_date, raw_date)
+ ' at ' +
(proboards.data('military_time') ? $.formatTime('HH:mm', raw_date) : $.formatTime('h:mmp', raw_date))));
})

</script>


Notice

If you would like the code to affect timestamps inside the Proboards shoutbox then use the two codes located in this post instead.

Somehow I can't copy and paste the code in black 

[Nscalerr]

How are you trying to doing it pitszal??

For me, I place the mouse cursor next to the start of the code, (keeping the left mouse button depressed) drag the cursor to the end of the code. Releasing the mouse button the code will remail highlighted, I press the right mouse button and select copy.

[moonbeam]

Chris - I have your code installed on a forum I co-admin on, and last night the forum owner brought it up that it was no longer working. I have specific time stamps on my own forum, but it's not done using that script and for the life of me I can't remember how I did it or I'd try doing that for my friend's forum. She runs a trivia game every Friday night and the "winner" of each question is determined by who posted first. So for her, the timestamps are really important. I'm not sure what might have changed to cause it to break but it must have happened some time in the last week since yesterday was the first time she mentioned it to me.

I won't give you the url to her forum since it's closed, but I did also install it just now on my test forum moon's test forum and it doesn't work there, either. I have disabled the few plugins I have there with no effect. Any help you may be able to provide would be very appreciated.

Have a good weekend.

[Chris]

Apr 7, 2018 10:45:16 GMT -8 moonbeam said:

Chris - I have your code installed on a forum I co-admin on, and last night the forum owner brought it up that it was no longer working. I have specific time stamps on my own forum, but it's not done using that script and for the life of me I can't remember how I did it or I'd try doing that for my friend's forum. She runs a trivia game every Friday night and the "winner" of each question is determined by who posted first. So for her, the timestamps are really important. I'm not sure what might have changed to cause it to break but it must have happened some time in the last week since yesterday was the first time she mentioned it to me.

I won't give you the url to her forum since it's closed, but I did also install it just now on my test forum moon's test forum and it doesn't work there, either. I have disabled the few plugins I have there with no effect. Any help you may be able to provide would be very appreciated.

Have a good weekend.

It looks like Proboards made a change to the function responsible for updating live dates. My code looks for "non_mod_date" within that function in order to identify it as the function responsible for dates but the newer function no longer has that easily identifiable and low false positive probability text within it.

To fix that we need to find another identifiable trait of the function so change non_mod_date to the following:

if($.livequery.queries[a].selector == "abbr.time" && "function" == typeof $.livequery.queries[a].fn && $.livequery.queries[a].fn.toString().indexOf("a few seconds ago") != -1)

It's not as unique as "non_mod_date" and it is quite plausible another livequery function could be added later that also contains that very text but because V6 is right around the corner and the previously stated goal by the development team of moving away from livequery due to its heavy tentacles and heavy footprint it should be OK until the V6 blockbuster drops (coming soon to a forum near you)

[moonbeam]

Thank you, Chris! That did the trick.

On to v6!

[Chris]

Thank you for bringing it to my attention

[moonbeam]

Well, it's not as if I considered you *responsible* for fixing it. However, you wrote it so I figured if anybody would be able to figure out what was going on it would be you. And I appreciate the effort.

[Chris]

I'm not sure who this Tapatalk person is who keeps liking your posts but I find myself almost always in agreement with him or her...

[moonbeam]

More of an "it". If I'm posting from my phone, it's typically via the tapatalk app. Right now, however, I'm on my tablet and using Chrome. That's why some of my posts are purple and some aren't.

[bluecargo1]

Hey, I am not too good at this and need help to get an exact date (MM/DD/YYYY) and an exact time only (HH:MM AM/PM) instead of the yesterday and today. Can you edit the code do it adds the date to a <td> tag and time to another <td> tag when I write $[post.created_on]. Could you guys help me? Chris  Brian

[Chris]

Oct 23, 2018 18:10:37 GMT -8 bluecargo1 said:

Hey, I am not too good at this and need help to get an exact date (MM/DD/YYYY) and an exact time only (HH:MM AM/PM) instead of the yesterday and today. Can you edit the code do it adds the date to a <td> tag and time to another <td> tag when I write $[post.created_on]. Could you guys help me? Chris  Brian

Show specific time - revisited

[bluecargo1]

Thank you Chris , that was I needed!

[bluecargo1]

Sorry to ask again, something is happening and I'm not sure why.
I did what you said to render the if and elifs useless, to always run the else, by removing the if and elif statement.
If you check this screenshot (prnt.sc/lazzom), one post, the bottom one added today follows the code you gave me, but for some reason the post made yesterday still is saying yesterday, and is not even going through my code; I know this because it would be formatted to have no style editing.
Do you know if something is wrong with my code? Chris
OLD CODE REMOVED FROM THIS POST

[bluecargo1]

Chris I think it is only happening with the page I refresh on for some reason. So if I refresh on page 2, in page 2, the time properly says 04:05 for ex, but on page 1 it isn't going through the code for some reason, making it say 4:05. Do you know what the reason is?

[Chris]

Oct 28, 2018 20:43:46 GMT -8 bluecargo1 said:

Chris I think it is only happening with the page I refresh on for some reason. So if I refresh on page 2, in page 2, the time properly says 04:05 for ex, but on page 1 it isn't going through the code for some reason, making it say 4:05. Do you know what the reason is?

Do you have a test page where I can observe this, I cannot get the results you describe here?

As for only certain dates getting a reformat you can comment out the following line which tells it to only reformat the "ago" dates (dates that do not contain an " at ") such as "less than a minute ago", "a few seconds ago" or "2 minutes ago"

// if (time.text().indexOf(" at ") == -1)

That would then remove the conditional and have it reformat all dates at all times since it looks like you are trying to change the time or date string for all dates or times not just "recent" times