Show specific time

[eaststandboy]

Hey

Is there a way of showing the exact time of a post rather than (19 hours ago)?

I know that after a certain time (24 hours?) it changes to the specific time but i would like it from post.


Sent from my HTC One X using proboards

[Chris]

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("a few seconds ago") != -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
• April 8, 2018 - changed "non_mod_date" to "a few seconds ago"
• July 11 2019 - Added script functionality to the date & time configuration tab of the Text Patrol plugin (uses sideload install method)
  
  

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>


SPOILER: Click to show

Proboards changed livequery function (8-Apr 2018)

<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>

Notice

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

[eaststandboy]

Cheers for this

[merleh]

Doesn't work for me.

[Jordan]

We can't help you without a forum URL.

[Chris]

To head off any misunderstanding this is what the code does...
Kindly direct your attention to the last post column where relative (elapsed) times have been converted to absolute time.

Before

After

Also note that dates that contain "yesterday" are absolute (not elapsed) time since they point to a specific event in time instead of being a measure of time since that event has occurred.

[merleh]

I still get displays like '7 minutes ago'.

[Chris]

You should only see those in admin panel but you still haven't given a forum url...

[merleh]

URL

[Chris]

[merleh]

[Chris]

Probably a timing issue but since I cannot see any dates on your forum in order to poke them, tickle them and make them burp I will take a guess and say try this instead

[OLD CODE REMOVED]


<script type="text/javascript">
$('abbr.recent_time').livequery(function () {
$('abbr.time').expire();
var time = $(this).removeClass('recent_time'),
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>


[merleh]

Thank you, this works.

Just a question - I want to change one thing if possible:
Postings from today should show without a specific date (just today instead of day and month) and just with a specific time.

Right now, postings from today are displayed like that:

[Chris]

replace $.datepicker.formatDate(user_date, raw_date) with 'Today'

[merleh]

Thanks, it works very well. Is it possible to display 'today' and 'yesterday' in bold? Unfortunately, I don't know anything about CSS.