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
– Cory Silva, Commented Apr 30, 2015 at 2:19
I use a filter in these cases. This answer uses a moment.js filter. My usage looks like: <span>{{myDate | jsonDate: "MM-dd-yyyy"}}</span> — Jasen
– Jasen, Commented Apr 30, 2015 at 2:33

vijayakumar v.p · Accepted Answer · 2016-06-07 09:15:11Z

10

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

edited Jun 7, 2016 at 9:15

answered Jun 7, 2016 at 8:20

vijayakumar v.p

1011 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Whatamidoing Over a year ago

This should be the best answer

Abhishek Dey · Accepted Answer · 2015-04-30 02:38:01Z

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, 2015 at 2:38

Abhishek Dey

1,6471 gold badge16 silver badges38 bronze badges

1 Comment

Kurkula Over a year ago

how do we use this filter? using | ctime? It didnt work for me. Could you please elaborate?

Community · Accepted Answer · 2017-05-23 11:54:05Z

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, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 30, 2015 at 4:57

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Comments

Ronel Gonzales · Accepted Answer · 2015-04-30 05:28:57Z

-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, 2015 at 5:28

Ronel Gonzales

1251 silver badge7 bronze badges

Collectives™ on Stack Overflow

Convert C# DateTime To Angular Date

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related