Formatting postDate using the ElementAPI plugin

Question

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?

Answer 1

$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' }}

Answer 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);