title: How to resolve null DateTime field in Ajax POST?
body: <p>I've passed in a serialized form in an Ajax POST function to my controller. All the properties are being mapped to the escalation object in the controller's constructor except for <code>DateTime?</code> <code>NextUpdate</code>  field.</p>
  
  <p>So in order to debug this I checked a number of things below:</p>
  
  <blockquote>
    <p>Input field element ID matches name of model property - yes</p>
    
    <p>Other object properties are populated in passed in escalation object -
    yes</p>
    
    <p>NextUpdate input field is within the createForm form container - yes</p>
    
    <p>DateTime value has been populated in the view - yes</p>
  </blockquote>
  
  <p><strong>Question:</strong></p>
  
  <p>Does anyone know why my DateTime property is null in the escalation object?</p>
  
  <ul>
  <li>Below is a gist of my setup for context:</li>
  </ul>
  
  <p>DateTimePicker declaration (I use the second input element to pass back the DateTime value):</p>
  
  <pre><code>               &lt;form action="" id="createForm" class="form-group has-warning" method="post"&gt;
                          &lt;div class="form-horizontal"&gt;
  
                                      &lt;!-- NextUpdateDisplay --&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label class="col-md-3 control-label" for="NextUpdateDisplay"&gt;Next Update Due&lt;/label&gt;
                                          &lt;div class="col-md-8"&gt;
                                              &lt;div class='input-group date' id='NextUpdateDisplay'&gt;
                                                  &lt;input type='text' class="form-control" /&gt;
                                                  &lt;span class="input-group-addon"&gt;
                                                      &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                                                  &lt;/span&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
  
  
  
                                      &lt;!-- Next Update Hidden Field --&gt;
                                      &lt;div&gt;
                                          &lt;input id="NextUpdate" name="NextUpdate" type="text" hidden disabled="disabled" /&gt;
                                      &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/form&gt; 
  </code></pre>
  
  <p>Javascript that passes the DateTimePicker value to my NextUpdate hidden input field onChange of the DateTimePicker values:</p>
  
  <pre><code>    $(function () {
          $('#NextUpdateDisplay').datetimepicker({
  
          });
      });
  
      $("#NextUpdateDisplay").on("dp.change", function (e) {
          $('#NextUpdate').val(moment(e.date).format());
      });
  </code></pre>
  
  <p>Ajax method:</p>
  
  <pre><code>$("#dialog-confirm-submit").dialog("open").on("dialogclose", function (event, ui) {
                  if ($(this).data("state") == "confirmed") {
                      $.ajax({
                          url: "@(Url.Action("Index", "CreateEscalation"))",
                          type: 'POST',
                      traditional: true,
                      data: $("#createForm").serialize(),
                      dataType: "json",
                      success: function (result) {
                          //todo: use result
                          if (result.Success) {
                              window.location.href = result.redirectUrl;
                          }
                          else {
                              $('#submitStatus').text("Error occurred while processing your request, please try again or contact system administrators");
                              $(this).addClass('alert alert-danger fade in');
                              $('#submitStatus').show();
  
                          }
                      }
                  });
  
                  }
              });
  </code></pre>
  
  <p>Controller post method: (gist)</p>
  
  <pre><code>    [HttpPost]
      public ActionResult Index(Escalation escalation)
      {
  
  
          //do  controller stuff here..
  
      }
  </code></pre>
  
  <p>Model property: (gist)</p>
  
  <pre><code>public partial class Escalation
  {
  
      public DateTime? NextUpdate { get; set; }
  
  }
  </code></pre>
  
  <p>Contents of escalation object in controller at runtime:</p>
  
  <p><a href="https://i.stack.imgur.com/2hhMK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hhMK.png" alt="enter image description here"></a></p>