Show specific time

[Rajiv]

Thanks Eton. I've inserted code in red. I'll let you know if any issues arise.

[Brian]

Feb 6, 2014 22:32:58 GMT -8 Chris said:

Feb 5, 2014 16:29:02 GMT -8 Brian said:

Updated my post as well to utilize the most recent code.

Brian, the posted code appears to have had BBCode auto-correct rendering it inoperable
 (e.g. "function" == typeof $.livequery.queries[/a][a].fn)

Bah. Fixed again.

[Rajiv]

Have I missed something? I haven't had a problem with the code, not that I've noticed.

[Chris]

Feb 9, 2014 0:46:50 GMT -8 Rajiv said:

Have I missed something? I haven't had a problem with the code, not that I've noticed.

That was regarding the code Brian so graciously modified and corrected Rajiv and sorry for the late reply, I meant to reply earlier and got sidetracked.

[Mr. Tom]

I apologise if this has already been brought up, but is it at all possible for posts made 'Today' to just show the time (e.g. '6:30pm') instead of 'today at 6:30pm'. If not it doesn't matter too much, just I think for what most people on my forum are used to, the 'today at' bit is unnecessary! The 'yesterday' and '[other dates]' feature is very nice though!

Never mind I've figured it out myself! For anyone else wondering, just change this:

'<span class="'+today+'">[font color="ff0000"]'+today+' [/font]</span>'
+ '<span class="at">[font color="ff0000"]@[/font]</span> <span class="at-time">' +
to this:

'<span class="'+today+'"></span>'
+ '<span class="at"></span> <span class="at-time">' +

I'm also altering the code myself to customise it!

[Mr. Tom]

On another note, is there a way to make yesterday's posts show as yesterday, because atm it's just showing as today's posts, even though I made them yesterday.

Also, instead of the posts I'm making today appearing as 'Today', they're showing as today's date which is not what I want. Is there an alteration I can make to this code:

SPOILER: Click to show

<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.selector == "abbr.time" && "function" == typeof $.livequery.queries.fn && $.livequery.queries.fn.toString().indexOf("non_mod_date") != -1)
{ timeID = $.livequery.queries.id; $.livequery.stop(timeID); break; }
}
$('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">@</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">@</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.match(/^(\d+)$/))){
if(d[1].length == 4)
c.append('<span class="year">'+a+' </span>').addClass("year_"+a);
else
c.append('<span class="day">'+a+' </span>').addClass("day_"+a)
}else{
c.append('<span class="month">'+a+' </span>').addClass("month_"+a)
}
}
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>

Thanks in advance,
Mr. Tom

[Chris]

Mar 7, 2014 14:20:49 GMT -8 Mr. Tom said:

I'm also altering the code myself to customise it!

Just a word of warning Mr. Tom, if you make changes on your own without understanding the implications and create a Frankenstein then you must feed and clothe that monster.

[johnd2442]

This was incredibly helpful. Thank you so much!

[Yog]

I am looking to use this code, and it all works great except, I need it to display seconds in the timestamp as well.

I tried editing the HH:mm to HH:mm:ss but it didn't work out like I'd hoped.

[Yog]

Oct 13, 2016 8:48:17 GMT -8 Yog said:

I am looking to use this code, and it all works great except, I need it to display seconds in the timestamp as well.

I tried editing the HH:mm to HH:mm:ss but it didn't work out like I'd hoped.

Got to the bottom of this. In case anyone else reading this later wants the same thing, here's a working code. Goes in Admin > Structure > Global Header & Footer > Global Footer


<!-- Proboards: Show exact time on posts (rather than "A few seconds ago") -->

<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:ss', raw_date) : $.formatTime('h:mm:ssp »', raw_date))
              )
          );

      })
</script>


[Chris]

Oct 13, 2016 13:23:42 GMT -8 Yog said:

Got to the bottom of this. In case anyone else reading this later wants the same thing, here's a working code. Goes in Admin > Structure > Global Header & Footer > Global Footer

Buggy code removed

Yog , there are a couple bugs^[1][2] in that old code you chose to modify, the code that addressed those bugs can be found in the first reply of this thread. You can add the seconds to the formatTime mask like you did in that old buggy code.

Feb 5, 2014 16:20:57 GMT -8 Chris said:

...[in addition] the use of livequery in Proboards coding is officially discouraged (plugins won't be approved if they use it for example). A more up-to-date version that addresses that bug as well as the livequery issue can be found in the first reply. 

SPOILER: Click to show

$(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:ss', raw_date) : $.formatTime('h:mm:ssp', 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]

+(proboards.data('military_time') ? $.formatTime('HH:mm:ss', raw_date) : $.formatTime('h:mm:ssp', raw_date))

+'</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:ss' : 'h:mm:ssp'), 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>

[Kami]

Chris

I am trying to also figure this out myself but in case someone has a quicker answer:

- Is there a way to modify the code to change 'today' and 'yesterday' to the date

- Is there a way to force four digit time? I would like to retain the option for members to choose military versus 12 hour, but I would like to uniformly display 00:00 (eg: one in the afternoon would display as either 01:00 PM or 13:00).

- Similarly, is there a way to force double digit dates? For example 01 March 2016 , instead of 1 March 2016.


?


Thanks in advance (: I'll edit this post if I figure it out.

[Chris]

Oct 29, 2016 16:11:02 GMT -8 Kami said:

Chris

I am trying to also figure this out myself but in case someone has a quicker answer:

- Is there a way to modify the code to change 'today' and 'yesterday' to the date

- Is there a way to force four digit time? I would like to retain the option for members to choose military versus 12 hour, but I would like to uniformly display 00:00 (eg: one in the afternoon would display as either 01:00 PM or 13:00).

- Similarly, is there a way to force double digit dates? For example 01 March 2016 , instead of 1 March 2016.


?


Thanks in advance (: I'll edit this post if I figure it out.

Kami the original code was via full date and was a bit simpler since calculations did not have to be made to determine "to"/"yester" and as for date formatting the jquery UI datepicker that Proboards uses is what is being employed here to format the date (and by extension; the time).

jQuery UI Datepicker said:

api.jqueryui.com/datepicker/

The format can be combinations of the following:



d - day of month (no leading zero)

dd - day of month (two digit)

o - day of the year (no leading zeros)

oo - day of the year (three digit)

D - day name short

DD - day name long

m - month of year (no leading zero)

mm - month of year (two digit)

M - month name short

MM - month name long

y - year (two digit)

yy - year (four digit)

@ - Unix timestamp (ms since 01/01/1970)

! - Windows ticks (100ns since 01/01/0001)

'...' - literal text

'' - single quote

anything else - literal text

There are also a number of predefined standard date formats available from $.datepicker:



ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)

COOKIE - 'D, dd M yy'

ISO_8601 - 'yy-mm-dd'

RFC_822 - 'D, d M y' (See RFC 822)

RFC_850 - 'DD, dd-M-y' (See RFC 850)

RFC_1036 - 'D, d M y' (See RFC 1036)

RFC_1123 - 'D, d M yy' (See RFC 1123)

RFC_2822 - 'D, d M yy' (See RFC 2822)

RSS - 'D, d M y' (Same as RFC 822)

TICKS - '!'

TIMESTAMP - '@'

W3C - 'yy-mm-dd' (Same as ISO 8601)

and similar format tokens exists for the PB coded  time picker extension

• lowercase h is hour in 12hr format, use hh if you want "09" instead of just "9"
• uppercase H is hour in military format, use HH if you want "06" instead of "6"
• lowercase m is minutes, use mm if you want "07" instead of "7"
• lowercase s is seconds, use ss if you want "01" instead of "1"
• lowercase p resolves to "am" or "pm"
• uppercase P resolves to "AM" or "PM"
• any other character will be treated as a literal and simply left in the format string

So in the code itself when you see "d M yy" that would format into "1 Oct 2016" while "dd M yy" would format into 01 Oct 2016".



The modified code below should achieve the goal:

<script>
/* 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));
//if(time.text().indexOf(" at ")== -1)
time.text($.datepicker.formatDate((proboards.data('time_style') ? 'dd M yy' : 'M dd, yy'), raw_date) + ' at ' + $.formatTime((proboards.data('military_time') ? 'HH:mm' : 'hh: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>

[Former Member]

dates are hard in javascript, most people use moments.js so much easier

[Kami]

Beautiful, Chris, thank you so much!