title: Angular js JSON data with MVC model binding for DateTime?
body: <p>I am using Angular JS to get and post data to my MVC 4 controller as JSON. All of my properties convert properly except the DateTime/DateTime? types. I would like to have a 'set it and forget it' approach to handling dates so that new classes and or properties that are added will not have to remember to do some special conversion to handle a date properly. I have seen the following approaches and possible disadvantages. What approach are people out there using for the same platform? Is there something in MVC4 that is handling this properly that I may not have configured? Any suggestions will be greatly appreciated.</p>
  
  <ol>
  <li>Custom model binder. As details in <a href="http://haacked.com/archive/2010/04/15/sending-json-to-an-asp-net-mvc-action-method-argument.aspx" rel="nofollow noreferrer">Phil Haack</a> blog. Possible
  performance issues.</li>
  <li>Perform some modification on the JS side. As detailed in <a href="http://erraticdev.blogspot.com/2010/12/sending-complex-json-objects-to-aspnet.html" rel="nofollow noreferrer">Robert Koritnik's blog</a>. This doesn't seem to work for Angular js, perhaps there is a setting in the $http.post that         will allow this to work but my object has all null values with this approach.</li>
  <li>Have some additional property such as FormattedDateTime that can be converted on the POST action. This isn't a 'set it and forget it approach' though it does allow for properly displaying dates in the client side which are still in the '/Date(695573315098)/' format</li>
  </ol>
  
  <p>Please see the following code example.
  C# class:</p>
  
  <pre><code>public class Person
  {
      public string FirstName { get; set; }
      public string LastName { get; set; }
      public DateTime BirthDate { get; set; }
      public DateTime? ApprovedForSomething { get; set; }
  }
  </code></pre>
  
  <p>Angular JS Controller:</p>
  
  <pre><code>    function PersonController($scope, $http) {
          $scope.getPerson = function () {
              $http.get('../../Home/GetPerson/1').success(function (data) {
                  $scope.Person = data;
              });
          }
          $scope.updateApprovedForSomething = function () {
              $http.post('../../Home/UpdatePerson', { person: $scope.Person }).success(function (data) {
                  console.log(data);
              });
          }
      }
  </code></pre>
  
  <p>Fiddlers POST:</p>
  
  <blockquote>
    <p>HTTP/1.1 200 OK Cache-Control: private Content-Type: application/json;
    charset=utf-8 Server: Microsoft-IIS/8.0 X-AspNetMvc-Version: 4.0
    X-AspNet-Version: 4.0.30319 X-SourceFiles:
    =?UTF-8?B?YzpcdXNlcnNcbmlja1xkb2N1bWVudHNcdmlzdWFsIHN0dWRpbyAyMDEyXFByb2plY3RzXFZhbGlkYXRpb25UZXN0XEhvbWVcR2V0UGVyc29uXDE=?=
    X-Powered-By: ASP.NET Date: Wed, 16 Jan 2013 14:48:34 GMT
    Content-Length: 124</p>
    
    <p>{"FirstName":"Bob","LastName":"Smith","BirthDate":"/Date(695573315098)/","ApprovedForSomething":"/Date(1358261315098)/"}</p>
  </blockquote>
  
  <p>As you can see with the Fiddler data the date is coming over as a JSON date but when hitting the POST method the DateTime property is not correct and the DateTime? property is null.</p>
  
  <p><img src="https://i.stack.imgur.com/v1eP2.png" alt="enter image description here"></p>