We display event dates/times via Wordpress date and time functions in am/pm time (12 hour, not 24 hour). For any times that are noon - i.e. "12:00 pm" - we'd like to display "12:00 noon" instead.

And we'd also like to display "12:00 midnight" instead of "12:00 am".

This is to avoid confusion (we run online events around the world at different times so there is room for this type of confusion).

All other times of the day can keep their am/pm, it's just these two exact times that we're seeking to change.

We display event dates/times via Wordpress date and time functions in am/pm time (12 hour, not 24 hour). For any times that are noon - i.e. "12:00 pm" - we'd like to display "12:00 noon" instead.

And we'd also like to display "12:00 midnight" instead of "12:00 am".

This is to avoid confusion (we run online events around the world at different times so there is room for this type of confusion).

All other times of the day can keep their am/pm, it's just these two exact times that we're seeking to change.

• date-time
• timezones

• 1 The best way to do this would be to replace the am and pm using jQuery - can you post your output code so we can see if there's something that can be targeted via the functionality? I've done something similar by replacing 'months' with 'seasons' but you have to be able to target an element and replace the text. – Tony Djukic Commented Apr 21, 2020 at 13:19
• Oh I see, you mean like this? I've tried that but I can't get it right. The page in question we're trying to change is here – Julian Commented Apr 21, 2020 at 14:23
• Might be having a hard time with it because the selection process is pretty ambiguous. Are you able to add to the template that generates the content for those entries? Then wrap the time in something simple like <span class="pp-time">12:00 pm</span>? – Tony Djukic Commented Apr 21, 2020 at 14:28
• Ok did that, and have now got this script: $(".tas-event-time").text(function () { return $(this).text().replace("pm", "noon"); }); – Julian Commented Apr 21, 2020 at 14:47
• You don't want to target all pm instances though, just those that start at 12:00, correct? – Tony Djukic Commented Apr 21, 2020 at 14:49

2 Answers 2

So what you need to do is make your life easier and instead of searching everything within every instance of .pp-post-content or .pp-post-content p, let's wrap the times or the times in question with a span tag. Like you suggested in your comments <span class="tas-event-time"> is sufficient enough.

Now, in your .js file, you want to add the following:

jQuery( document ).ready( function($) {
    $( '.tas-event-time' ).html( $( '.tas-event-time' ).html().replace( '12:00 pm','12:00 noon') );
} );

That will, once the document is ready, change the instances of '12:00 pm' to '12:00 noon'.

I think you can Do it with Translation loops! Simply find the "12:00 pm" and put 12:00 Noon. Maybe It works! try it :D.