2014-01-14 135 views
1

以下是我的代碼文件,我嘗試過這些,但從來沒有看到任何日期選擇器彈出。我不知道問題出在哪裏,彈出窗口必須在enrollementdate輸入框中顯示。jquery日期選擇器不工作MVC4

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> 

@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="editor-field"> 
      @Html.EditorFor(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" /> 
     </p> 
    </fieldset> 
} 

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

_layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
     rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
     rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
     rel="stylesheet" type="text/css" /> 

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
     type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
     type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
     type="text/javascript"></script> 
</head> 

<body> 
    @RenderBody() 
</body> 
</html> 

datepicker.js

$(function() { 
    $(".datefield").datepicker(); 
}); 

date.cshtml

@model DateTime 
Using Date Template 
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()), 
    new { @class = "datefield", type = "date" }) 
+0

在控制檯上的任何錯誤? –

+0

你有沒有做過任何調試?在呈現的html中,輸入是否有正確的類?你是否包含datepicker.js並且路徑是否正確?瀏覽器控制檯中是否有錯誤? –

+0

對象沒有方法在控制檯上看到datepicker –

回答

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

它會幫助很多,使用jQuery文件