Jump to content

Community

Displaying only date, year etc from a JSON date


Meddysong
 Share

Recommended Posts

Hello! I'm out of my depth, same as usual.

I've pulled some data from an API and have returned my array of objects. I can display the date easily enough with the following:

{{foreach $result as $res}}
	<p>{$res['date']}</p>
{{endforeach}}

The dates take the form yyyy-mm-dd.

For styling purposes, what I'd like to do is be able to display the day from that day and then in another line of code the month, maybe even the year as a third.

My problem is that I don't know how to do this is. If <p>{$res['date']}</p> returns 2019-04-23, how do I change it to display i) 23, ii) Apr, iii) 2019?

Link to comment
Share on other sites

Or if you do...

$timestamp = strtotime( $res['date'] );

... then you can do...

date( 'j', $timestamp ) // Day 
date( 'n', $timestamp ) // Month
date( 'Y', $timestamp ) // Year

See https://www.php.net/manual/en/function.date.php for other values you can use instead of j/n/Y

Or if this is within Invision Community you can do...

{datetime="strtotime( $res['date'] )"}

To get the "relative" date

Link to comment
Share on other sites

Oh, oh, I've got it working ... and hit upon a problem which I hadn't anticipated. The PHP formats return values for %D, %M etc in English, don't they? Bother.

I suspect one solution might be for me to write some little formula to look up a value corresponding to the output of, say, %n (the month number, ranging from 1 to 12). Or is there some tool already built within the site? I've noticed that the upcoming events widget displays values according to the locale so thought I'd have a look at upcomingEvents.php. Unfortunately, that doesn't contain any of the HTML to be output, so I wasn't able to see what function produces the month name which is formatted by .ipsCalendarDate_month when the widget loads.

Edited by Meddysong
Link to comment
Share on other sites

So, looking at your code this appears to be within the Invision Community software, in a template. I assume the language you wish to output the dates as is installed and you have the language pack available, and selected by your user account.

In that case, you can use our \IPS\DateTime class

{{$dateTime = \IPS\DateTime::ts( strtotime( $res['date'] ) );}}

{$dateTime->strFormat( '%D' )}

https://invisioncommunity.com/developers/docs/fundamentals/dates-and-times-r165/

Link to comment
Share on other sites

Thank you for taking the time to look into this and advise me, Brandon. Unfortunately, it's not generating expected results.

My template includes the following:

{{$timestamp = strtotime( $res['komenca_dato'] );}}
{{$tago = date( 'j', $timestamp );}}
{{$monato = date( 'M', $timestamp );}}
{{$jaro = date( 'y', $timestamp );}}
{{$dateTime = \IPS\DateTime::ts( strtotime( $res['komenca_dato'] ) );}}

If I have

<time datetime="{$res['komenca_dato']}" class="ipsCalendarDate">
	<span class="ipsCalendarDate_month" data-format="%M">{$monato}</span>
	<span class="ipsCalendarDate_date" data-format="%j">{$tago}</span>
</time>

then I correctly see

Untitled-1.jpg.bb87ebeb60f33fb92b44ecd5046fcf1c.jpg

when $res['komenca_dato'] is 2019-05-03. Since the month name is in English, I instead try

<time datetime="{$res['komenca_dato']}" class="ipsCalendarDate">
	<span class="ipsCalendarDate_month" data-format="%M">{$dateTime->strFormat( '%M' )}</span>
	<span class="ipsCalendarDate_date" data-format="%j">{$dateTime->strFormat( '%j' )}</span> <!-- I don't really need this because the result was correct originally, but it's here for demonstration purposes -->
</time>

and get

Untitled-1.jpg.937ea8d3f097de525764a443fc51ae8b.jpg

Every return has a month '00' instead of the name of the month in my language. The '123' seems to be because May 3rd is the 123rd day of the year, although the PHP docs show that %j should return a figure between 1 and 7.

It's not the end of the world. Thank you for sparing me some of your time to help.

Link to comment
Share on other sites

Hello,

Example #1

{{$tago = date( 'j', $timestamp );}}
{{$monato = date( 'M', $timestamp );}}
{{$jaro = date( 'y', $timestamp );}}

You use https://www.php.net/manual/en/function.date.php

j      Day of the month without leading zeros                              1 to 31

M     A short textual representation of a month, three letters     Jan through Dec

y      A two digit representation of a year                                    Examples: 99 or 03

Example #2

<span class="ipsCalendarDate_month" data-format="%M">{$dateTime->strFormat( '%M' )}</span>
<span class="ipsCalendarDate_date" data-format="%j">{$dateTime->strFormat( '%j' )}</span> <!-- I don't really need this because the result was correct originally, but it's here for demonstration purposes -->

You use strFormat()

	/**
	 * Format times based on strftime() calls instead of date() calls, and convert to UTF-8 if necessary
	 *
	 * @param	string				$format		Format accepted by strftime()
	 * @param	\IPS\Lang|\IPS\Member|NULL	$memberOrLanguage		The language or member to use, or NULL for currently logged in member
	 * @return	string
	 */

https://www.php.net/manual/en/function.strftime.php

M     Two digit representation of the minute             00 through 59

j       Day of the year, 3 digits with leading zeros       001 to 366

Link to comment
Share on other sites

Oh, that's so obvious now that you've pointed it out! Thank you!

Unfortunately, it hasn't actually solved the real problem.

Here's a screenshot from what I'm programming based on the API:

Untitled-1.jpg.dc84e4822e5cf48430e923bbd0fc1e96.jpg

Note that the month name is still in English. I know that the locale is installed and loaded because if I use the upcoming events widget, the month is no longer in English but is in my language:

Untitled-1.jpg.b1fc61ae3356d0fa957edb0b0b630a3e.jpg

Link to comment
Share on other sites

1 hour ago, newbie LAC said:

Do you use the first code?

No, I'm using the second:

<div class="datoj">{{$komenca_dato = \IPS\DateTime::ts( strtotime( $res['komenca_dato'] ) );}}
	<time datetime="{$komenca_dato}" class="ipsCalendarDate">
		<span class="ipsCalendarDate_month" data-format="%b">{$komenca_dato->strFormat( '%b' )}</span>
		<span class="ipsCalendarDate_date" data-format="%e">{$komenca_dato->strFormat( '%e' )}</span>
	</time>
</div>

 

Link to comment
Share on other sites

4 hours ago, Meddysong said:

because if I use the upcoming events widget, the month is no longer in English but is in my language:

That widget uses the core.global.core.datetime controller

example 

<span class='ipsCalendarDate_month' data-controller="core.global.core.datetime" data-time="{$event->nextOccurrence( $today, 'startDate' )->format('c')}" data-format="%b">{$event->nextOccurrence( $today, 'startDate' )->monthNameShort}</span>

the next part

{$event->nextOccurrence( $today, 'startDate' )->monthNameShort}

is replaced by javascript and the month names gets from language

'month_0' => "January",
'month_1' => "February",
'month_2' => "March",
'month_3' => "April",
'month_4' => "May",
'month_5' => "June",
'month_6' => "July",
'month_7' => "August",
'month_8' => "September",
'month_9' => "October",
'month_10' => "November",
'month_11' => "December",
'month_0_short' => "Jan",
'month_1_short' => "Feb",
'month_2_short' => "Mar",
'month_3_short' => "Apr",
'month_4_short' => "May",
'month_5_short' => "Jun",
'month_6_short' => "Jul",
'month_7_short' => "Aug",
'month_8_short' => "Sep",
'month_9_short' => "Oct",
'month_10_short' => "Nov",
'month_11_short' => "Dec",

See how it works. Screenshots from your forum

Javascript enabled

may.jpg.997fb4658eb0ce620b78ae1b99c529be.jpg

Javascript disabled

may2.jpg.b37b3e5d86b4247d64aaf7766880f14a.jpg

Link to comment
Share on other sites

I'm not sure about how to do it. I know I can add the controller but then I get NaN. What do I need to generate? A language string month_{$komenca_dato->strFormat( '%m' )} ? The problem with that is that strFormat seems only capable of providing two-digit months, so I would be able to get month_01 but but not month_1. (Plus the values aren't accurate; January is the 0th month in the JS array.)

How can I do it? My variable $komenca_dato doesn't have the property monthNameShort.

 

Link to comment
Share on other sites

You should to add the data-time attribute

<div class="datoj">{{$komenca_dato = \IPS\DateTime::ts( strtotime( $res['komenca_dato'] ) );}}
	<time datetime="{$komenca_dato}" class="ipsCalendarDate">
		<span data-controller="core.global.core.datetime" class="ipsCalendarDate_month" data-time="{$res['komenca_dato']}" data-format="%b">{$komenca_dato->strFormat( '%b' )}</span>
		<span data-controller="core.global.core.datetime" class="ipsCalendarDate_date" data-time="{$res['komenca_dato']}" data-format="%e">{$komenca_dato->strFormat( '%e' )}</span>
	</time>
</div>
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy