using datepicker to change dates and submitting form does not jump to control action but falls over on html debug points

Question

I have the following HTML form:

@using(Html.BeginForm("EditCourse", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
      {              
        <div class="twelve columns" style="margin:10px 0px 30px 30px">
          <div class="row">
            <div class="six columns" style="margin-left:-5px; width:320px;">
              @Html.LabelFor(c => c.Course.Name)
              @Html.EditorFor(c => c.Course.Name)
              @Html.HiddenFor(c => c.Course.CourseID)
            </div>
            <div class ="six columns" style="width:320px;">
              @Html.LabelFor(c => c.Course.Author)
              @Html.EditorFor(c => c.Course.Author)
            </div>

            <div class="row">
              <div class="twelve columns" style="width:640px;">
                @Html.LabelFor(c => c.Course.Description)
                @Html.EditorFor(c => c.Course.Description)
              </div>
            </div>

            <div class="row">
              <div class="six columns" style="width:320px;">   
                @Html.LabelFor(c => c.Course.ParticipationPoints)
                @Html.EditorFor(c => c.Course.ParticipationPoints)
              </div>
              <div class="six columns" style="width:320px; float:left;">
                @Html.LabelFor(c => c.Course.ExpiryDate)
                <input type="text" id="expires" name="expires" /><br /> 
                @Html.EditorFor(c => c.Course.ExpiryDate)
              </div>
            </div>

            <div class="row">
              <div class="twelve columns" style="width:640px;">
                @Html.LabelFor(c => c.Course.CategoryGroupID, "Category")
                @Html.DropDownListFor(c => c.Course.CategoryGroupID, new SelectList(Model.CategoryGroups, "CategoryGroupID", "CategoryGroupName", Model.Course.CategoryGroupID))
              </div>
            </div>

            <div class="row">
              <div class="six columns">
                @Html.HiddenFor(c => c.Course.UploadDate)
              </div>
            </div>

            <div class="twelve columns">
              <input id="FileSubmit" type="submit" class="medium button bottom20 top20" value="Save Changes" style="margin-left:235px;"/>
            </div>
          </div>
        </div>                
      }

Within my editfor for expirydate it is showing as full string us format of datetime but from the UI I want the user to display only shortdatestring in UI so I have written the following javascript:

$(document).ready(function () {
    $('#expires').datepicker({ dateFormat: 'dd/mm/yy' });
    $('#expires').val('@Model.Course.ExpiryDate.ToString("dd/MM/yyy")');

    $("#expires").change(function () {
        var currentDate = $(this).val();
        var array = currentDate.split("/", 3);
        var day = array[0];
        var month = array[1];
        var year = array[2];
        $('#Course_ExpiryDate').val(month + "/" + day + "/" + year + " 23:59:59");
    });
});

When the page loads the date is correctly displayed in the input box that I have added to display in UK format and i have shown the editorfor for the expirydate to ensure that the changes to the box are updated in the US format in the editor for.

If I try to edit my model without changing the date it works as expected and jumps straight to the controller to process the form. However if I change the date it does not and jumps to the HTML form where it is failing to find some of the things already rendered on the page.

What could be causing this issue?