Wini San Wini San - 5 months ago 144
AngularJS Question

Convert GMT date format to only time format

I am building an html application using AngularJS wherein I want to display the json file data on html page. Can anyone help me to Convert GMT date format from json file to hour:minutes AM/PM

Json file looks like this:

[
{
"startTime": "Sun May 24 2015 01:00:00 GMT+0530 (IST)",
"endTime": "Sun May 24 2015 01:30:00 GMT+0530 (IST)",
"title": "Event 1"
},
{
"startTime": "Sun May 24 2015 04:00:00 GMT+0530 (IST)",
"endTime": "Sun May 24 2015 06:00:00 GMT+0530 (IST)",
"title": "Event 2"
},
{
"startTime": "Sat May 23 2015 20:00:00 GMT+0530 (IST)",
"endTime": "Sat May 23 2015 21:30:00 GMT+0530 (IST)",
"title": "Event 3"
},
{
"startTime": "Sat May 23 2015 21:30:00 GMT+0530 (IST)",
"endTime": "Sat May 23 2015 22:15:00 GMT+0530 (IST)",
"title": "Event 4"
},
{
"startTime": "Sun May 24 2015 02:00:00 GMT+0530 (IST)",
"endTime": "Sun May 24 2015 03:00:00 GMT+0530 (IST)",
"title": "Event 5"
}
]

Answer

The link provided by @worldask says

Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.

So I am using a custom filter for converting Sun May 24 2015 01:00:00 GMT+0530 (IST) to milliseconds and then using angular filter to show as hh:mm AM/PM

HTML

<div ng-repeat="date in dateJson">
      {{date.startTime | myDateFilter | date:'hh: mm a' }}
</div>

dateJson is your sample json...

custom filter

app.filter('myDateFilter', function() {

  return function(dateString) {
    var date = new Date(dateString)

    // converting to milliseconds
    dateString = date.getTime();
    return dateString;
  }
});

SAMPLE PLUNKER