Jquery datepicker submit value to the MVC4 model

Question

I have following code which is used to be one popup of datepicker in date enrollment field. and want to submit date value to the enrollment field in the database. in short i mean to say i want to pick a date from jquery datepicker instead of giving it manually. but unluckily never works ... i want when i click over enrollment field there is a popup of jquery datapicker....

my student .cs

namespace ContosoSite.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    [MetadataType(typeof(StudentMetadata))]
    public partial class Student
    {
        public Student()
        {
            this.Enrollments = new HashSet<Enrollment>();
        }

        public int StudentID { get; set; }
        public string LastName { get; set; }
        public string FirstName { get; set; }
        [Display(Name = "EnrollmentDate")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public Nullable<System.DateTime> EnrollmentDate { get; set; }
        public string MiddleName { get; set; }
        public virtual ICollection<Enrollment> Enrollments { get; set; }
    }
}

create.cshtml

@model ContosoSite.Models.Student
@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"> 
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Student</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        @*<div class="editor-label">
            @Html.LabelFor(model => model.EnrollmentDate)
        </div>
        <div class="datefield editor-field">
            @Html.EditorFor(model => model.EnrollmentDate)
            @Html.ValidationMessageFor(model => model.EnrollmentDate)
        </div>*@
        <div class="editor-label">
            @Html.LabelFor(model => model.EnrollmentDate)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EnrollmentDate)
            @Html.ValidationMessageFor(model => model.EnrollmentDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MiddleName)
        </div>
        <div class="editor-field " >
            @Html.EditorFor(model => model.MiddleName)
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>

        <p>
            <input type="submit" value="Create" />

    </fieldset>
}
<script>
      $(function () {
          $("#datepicker").datepicker();
      });
  </script>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Answer 1

Change your script

<script>
      $(function () {
          $("#EnrollmentDate").datepicker();
      });
  </script>