Parse dates from strings in Angular.js

Question

I need to parse some dates from strings coming from JSON data. How to do that in Angular? I tried to apply Date.parse directly (Date.parse({{ item.in_time}})) but that didn't work. I also tried the json filter {{ item.out_time | json | date:'shortTime'}}. I guess I need a custom filter (like this: How to format a JSON date in AngularJS but I don't know where to add it in my app

var mockData = [{
  "field1": "Annie Parker",
  "field2": "Structural Analysis Engineer",
  "field3": "Mybuzz",
  "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
  "out_time": '1483251003000',
}, {
  "field1": "John Diaz",
  "field2": "Tax Accountant",
  "field3": "Tagchat",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 9:00:03',
}, {
  "field1": "Sean Bailey",
  "field2": "Senior Developer",
  "field3": "Voonder",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 10:00:03',
}, {
  "field1": "Wanda Webb",
  "field2": "Biostatistician I",
  "field3": "Realcube",
  "in_time": '01 Jan 2017 5:00:03',
  "out_time": '01 Jan 2017 5:00:03',
}];


var App = angular.module('myApp', []);

function DataCtrl($scope, $http) {

  $scope.items = mockData;

}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='DataCtrl'>

    <h1>Data</h1>
    <table class="row-border hover table table-bordered cb-data-table">
      <tr>
        <th>In Time</th>
        <th>Out Time</th>
        <th>Diff</th>
      </tr>

      <tr ng-show="!items.length">
        <td colspan="3" style="text-align: center">~ No Any Records ~</td>
      </tr>

      <tr ng-repeat="item in items">
        <td>{{ item.in_time | date:'shortTime'}}</td>
        <td>{{ item.out_time | json | date:'shortTime'}}</td>
        <td></td>
      </tr>
    </table>

score 1 · Answer 1 · answered Jun 20 '17 at 09:11

Parse your data in object new Date().

new Date(1483251003000)
new Date('01 Jan 2017 8:00:03')

And after in your html you can use {{item.in_time | date: 'dd/MM/yyyy'}} per exemple

In my project i use this and it's working.

JS

for (var i = 0; i < temp.length; i++) {
    temp[i].Birthdate = new Date(response.data[i].Birthdate)
}

HTML

{{item.Birthdate  | date: 'dd/MM/yyyy'}}

Ramesh Rajendran · Accepted Answer · 2017-06-20T13:04:47.890

Assign Date.parse() in a scope object.like, $scope.Parse= Date.parse;

then you can call Parse(item.out_time) in html

But kindly check the value 1483251003000 is correct or not!

var mockData = [{
  "field1": "Annie Parker",
  "field2": "Structural Analysis Engineer",
  "field3": "Mybuzz",
  "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
  "out_time": '1483251003000',
}, {
  "field1": "John Diaz",
  "field2": "Tax Accountant",
  "field3": "Tagchat",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 9:00:03',
}, {
  "field1": "Sean Bailey",
  "field2": "Senior Developer",
  "field3": "Voonder",
  "in_time": '01 Jan 2017 8:00:03',
  "out_time": '01 Jan 2017 10:00:03',
}, {
  "field1": "Wanda Webb",
  "field2": "Biostatistician I",
  "field3": "Realcube",
  "in_time": '01 Jan 2017 5:00:03',
  "out_time": '01 Jan 2017 5:00:03',
}];


var App = angular.module('myApp', []);
   function DataCtrl($scope, $http) {
   $scope.Parse= Date.parse;

  $scope.items = mockData;

}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp'>
  <div ng-controller='DataCtrl'>

    <h1>Data</h1>
    <table class="row-border hover table table-bordered cb-data-table">
      <tr>
        <th>In Time</th>
        <th>Out Time</th>
        <th>Diff</th>
      </tr>

      <tr ng-show="!items.length">
        <td colspan="3" style="text-align: center">~ No Any Records ~</td>
      </tr>

      <tr ng-repeat="item in items">
        <td>{{ Parse(item.in_time) | date:'shortTime'}}</td>
        <td>{{ Parse(item.out_time) | date:'shortTime'}}</td>
        <td></td>
      </tr>
    </table>

Slava Utesinov · Answer 3 · 2017-06-20T09:46:34.803

angular.module('app', [])
.controller('vm', function($scope){
    $scope.mockData = [{
      "field1": "Annie Parker",
      "field2": "Structural Analysis Engineer",
      "field3": "Mybuzz",
      "in_time": '1483251003000', // this shows out correctly because it's pre-parsed
      "out_time": '1483251003000',
    }, {
      "field1": "John Diaz",
      "field2": "Tax Accountant",
      "field3": "Tagchat",
      "in_time": '01 Jan 2017 8:00:03',
      "out_time": '01 Jan 2017 9:00:03',
    }, {
      "field1": "Sean Bailey",
      "field2": "Senior Developer",
      "field3": "Voonder",
      "in_time": '01 Jan 2017 8:00:03',
      "out_time": '01 Jan 2017 10:00:03',
    }, {
      "field1": "Wanda Webb",
      "field2": "Biostatistician I",
      "field3": "Realcube",
      "in_time": '01 Jan 2017 5:00:03',
      "out_time": '01 Jan 2017 5:00:03',
    }];   
}).filter('fdate', function(){
   return function(input, formatin, formatout){
       formatin = formatin || 'DD MMM YYYY HH:mm:ss';
       formatout = formatout || 'D/M/YY HH:mm';
       return (isNaN(input) ? moment(input, formatin) : moment(new Date(+input))).format(formatout);      
   }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>

<div ng-app='app' ng-controller='vm'>
  <ul>
    <li ng-repeat='item in mockData'>{{item.in_time | fdate}} - {{item.out_time | fdate}}</li>
  </ul>
</div>

@user2314737, actually `f` is not a filter,but you can simple convert it to `.filter` with date time format as parameter. — Slava Utesinov, Jun 20 '17 at 09:33

Parse dates from strings in Angular.js

3 Answers3