1

Building a small AngularJS app and using the ElementAPI plugin for the first time.

I can set 'postDate' => $entry->postDate which gives me

postDate : {
   date: "2015-12-10 07:04:02.000000",
   timezone_type: 3,
   timezone: "UTC"
}

as an example.

Now I can access this date in Angular by doing {{note.postDate.date}} but obviously it's just a string so I can't use any native Angular filters for formatting.

Is there a way I can access the postDate with a date format? What options do I have?

7

$entry->postDate will give you the postDate property of the EntryModel, which itself is a DateTime object.

The JSON transformer will do its best to convert that object to JSON by returning its visible properties, which produces the JSON object in your example.

Angular has built-in date filters, but it requires the input data to be in a recognized format. So, what you really want in your JSON - rather than a representation of the whole DateTime object - is a more primitive value that Angular knows how to interpret as a date: You need a timestamp.

Luckily, you can easily access the timestamp of the PHP DateTime object in your transformer, like this:

'postDate' => $entry->postDate->getTimestamp() * 1000

(We're multiplying the timestamp by 1000 because Angular wants the timestamp to represent milliseconds; PHP gives us the timestamp in seconds.)

Then, in Angular you can use the date filter to change the format as desired, which in your front-end code would look something like: {{ note.postDate | date:'medium' }}

| improve this answer | |
  • As an FYI - need to do 'postDate' => $entry->postDate->getTimestamp()*1000 as Angular needs the timestamp in milliseconds – Steven Grant Dec 16 '15 at 14:12
2

Anything you spit out of Craft is going to be a string until you convert it into javascript so it's "native" to Angular/Javascript. JSON is just a transport format. There's no standard format for dates in JSON (which is a little counter intuitive!).

I would do something like:

$jsDate =  $entry->postDate->iso8601();
... // output as usual

8601 is a good format to get your date into that JS can convert. Then make that into a JS Date, something like:

var angularDate = new Date(whatever);
| improve this answer | |
  • So is $jsDate = $entry->postDate.iso8601(); happening in the config/elementapi.php then? – Steven Grant Dec 14 '15 at 9:16
  • iso8601 a helper method in the DateTime class. Since the Element API just extends Craft, anything you can call in Craft is fair game. postDate just happens to be a DateTime object which is why it works. – RitterKnight Dec 14 '15 at 19:44
  • I don't think the dot accessor syntax will work in the context of the JSON transformer. The dot syntax is for Twig, whereas in PHP you'd want to use the arrow syntax, like $jsDate = $entry->postDate->iso8601() – Michael Rog Dec 15 '15 at 16:10
  • Oops, duh- fixed, thank you, Your answer is much better than mine! – RitterKnight Dec 15 '15 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.