Convert C# DateTime To Angular Date

Question

I have an Angular collection bound to a repeater that is populated from an MVC JsonResult.

    $scope.loadData = function () {
        $http.get('/Product/GetDiscountCodes')
          .then(function (result) {
              console.log(result);
              $scope.discountCodes = result.data.DiscountCodes;
              $scope.selected = {};
          });
    };

One of the fields in the repeater is populated with the date. The date returned from the server is C# DateTime which looks like this:

1/5/2015 12:02:00 AM

However when it is bound by Angular is displays like this:

/Date(1420434120000)/

How can I get the date to display properly in my textfield in mm/dd/yyyy format?

I tried the ui-utils date format but that didn't work.

I also tried creating my own directive which formats the date properly but when the save event happens, the date send to the server side method is all jacked up.

       function inputDate() {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelController) {
            ngModelController.$parsers.push(function (data) {
                if (data === null) { return null; }
                var d = moment(data).format('YYYY-MM-DD');
                return d;
            });

            ngModelController.$formatters.push(function (data) {
                if (data === null) { return null; }
                return moment(data).format('MM/DD/YYYY');
            });
        }
    }
}
   angular.module('discountApp')
    .directive('inputDate', inputDate);

THanks for the help!

That is somewhat of a hack that Microsoft uses to get the date. I think they do that to get around the annoying UTC offsets. But anyways just evaluate the Date() function in your service call. If you do not want to evaluate it you could use extract the timestamp and use momentjs. Point is mold that data in the service before returning it to any other services or controllers. — Cory Silva, Apr 30 '15 at 02:19
I use a filter in these cases. This [answer](http://stackoverflow.com/a/26898454/2030565) uses a _moment.js_ filter. My usage looks like: `{{myDate | jsonDate: "MM-dd-yyyy"}}` — Jasen, Apr 30 '15 at 02:33

vijayakumar v.p · Answer 1 · 2016-06-07T09:15:11.967

10

use the {sampledate.slice(6, -2) | date:'dd/MM/yyyy'}

edited Jun 07 '16 at 09:15

answered Jun 07 '16 at 08:20

vijayakumar v.p

101
1
3

This should be the best answer – FernandoG Oct 24 '18 at 13:58

score 8 · Answer 2 · answered Apr 30 '15 at 02:38

8

var app = angular.module('app',[]);
app.filter('ctime', function(){

  return function(jsonDate){

    var date = new Date(parseInt(jsonDate.substr(6)));
    return date;
  };

});
app.controller('fCtrl', function($scope){

  $scope.date = '/Date(1420875802707)/';

});

answered Apr 30 '15 at 02:38

Abhishek Dey

1,601
1
15
38

how do we use this filter? using | ctime? It didnt work for me. Could you please elaborate? – Kurkula Dec 26 '16 at 07:52

score 2 · Answer 3 · edited May 23 '17 at 11:54

2

This seems to be issue with the serialization library you are using in .Net. Look at this blog post by Scott Hanselman

http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

It talks about this very issue. Date should be serialized as ISO 8601 format.

You may have to change your serializer, see here Setting the Default JSON Serializer in ASP.NET MVC

edited May 23 '17 at 11:54

Community

1
1

answered Apr 30 '15 at 04:57

Chandermani

42,589
12
85
88

score -1 · Answer 4 · answered Apr 30 '15 at 05:28

-1

using code script: $filter('date')($scope.Your_DateTime_Model, 'MM/dd/yyyy')

using code view: <input class="form-control" type="text" data-ng-model="Your_DateTime_Model | date:'MM/dd/yyyy'" />

answered Apr 30 '15 at 05:28

Ronel Gonzales

125
1
7

Convert C# DateTime To Angular Date

4 Answers4

Linked