Displaying only date, year etc from a JSON date

[+Meddysong]

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?

[+opentype]

When the API doesn’t provide the pieces, you can “explode” it with the hyphen as delimiter. 
https://www.php.net/manual/en/function.explode.php

[+Mark]

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

[+Meddysong]

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 April 23, 2019 by Meddysong

[+bfarber]

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/

[+Meddysong]

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

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

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.

[+newbie LAC]

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

[+Meddysong]

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:

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:

[+newbie LAC]

Do you use the first code?

[+Meddysong]

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>

 

[+newbie LAC]

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

Javascript disabled

[+Meddysong]

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.

 

[+newbie LAC]

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>

[+Meddysong]

Amazing -- it works! Thank you for all your help 🙂

[+Meddysong]

Thank you for your help, @opentype, @Mark, @bfarber and, of course, @newbie LAC. With your help, I've been able to take an api from here and turn it into something pretty here. I'm really happy with the result 🙂