Làm thế nào để thêm DatePicker vào trang MVC3 C#

Question

Tôi đã cố gắng tìm ra cách để làm điều này tất cả các buổi chiều, nhưng dường như không thể hiểu được cách để DatePicker làm việc với trang web của tôi.

Ngoài ra, nếu có thể, tôi muốn xóa phần Thời gian của DateTime, vì tôi chỉ quan tâm đến ngày mục nhập được đăng.

Tôi đã bao gồm mã cho đến nay bên dưới, tôi đã xóa khá nhiều mọi thứ tôi đã cố gắng từ trước đến nay nên nó đã bắt đầu lại. Tôi đã tham chiếu các tệp JQuery ở trên cùng của _Layout.cshtml mà tôi nghĩ là chính xác.

Tôi đã xem nhiều hướng dẫn trên web nhưng gặp khó khăn để có ý nghĩa nhiều về chúng, mặc dù tôi sẽ tiếp tục đọc.

Tôi đã thêm những dòng này vào đầu _Layout.cshtml của tôi (Tôi cũng đã giải nén và sao chép các thư mục JQuery đến các địa điểm tham chiếu dưới đây cũng)

<link href="@Url.Content("~/Content/jquery-ui/redmond/jquery-ui-1.8.21.custom.css")" rel="stylesheet" type="text/css" /> 
<script src="@Url.Content("~/Scripts/jquery-1.8.11.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.core.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/ui/minified/jquery.ui.datepicker.min.js")" type="text/javascript"></script> 

Xem Mã của tôi trông như thế này :

@model dale_harrison.Models.News 

@{ 
    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>News</legend> 

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

     <div class="editor-label"> 
      @Html.LabelFor(model => model.News_Date) 
     </div> 
     <div class="editor-field"> 
      @*@Html.EditorFor(model => model.News_Date)*@ 
      @Html.EditorFor(model => model.News_Date, new object{ id = "news_date" }) 
      @Html.ValidationMessageFor(model => model.News_Date) 
     </div> 

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

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

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); 
    }); 
</script> 

mẫu của tôi là ở đây:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Data.Entity; 

namespace dale_harrison.Models 
{ 
    public class News 
    { 
     public int ID { get; set; } 
     public string News_Entry { get; set; } 
     public DateTime News_Date { get; set; } 
    } 

    public class NewsDBContext : DbContext 
    { 
     public DbSet<News> News_Entries { get; set; } 
    } 
} 

Nhiều cảm ơn trước cho bất cứ ai fo r giúp

Answer 1

Hãy thử điều này đầu tiên:

Thêm mã html của bạn nếu không có sự giúp đỡ html:

<input type="text" id="news_date" name="news_date" /> 

Hoặc, nếu bạn muốn thêm id với helper Html:

@Html.EditorFor(model => model.News_Date, new { id = "news_date" }) 

Và sau đó thêm mã javascript này:

$(document).ready(function() { 
      $("#news_date").datepicker({ dateFormat: 'dd/mm/yy' }); 
}); 

Bạn có thể thử này đầu tiên để kiểm tra xem bạn đã cài đặt nó tất cả các cấu hình trong dự án của bạn một cách chính xác. Bạn nên giải quyết vấn đề của mình với những dòng đó.

Sau khi bạn làm việc này trong trang web của mình, hãy đọc về những người trợ giúp html và cách đóng gói mã để bạn không phải viết lại điều này mọi lúc.

Hy vọng điều đó sẽ hữu ích!

Answer 2

Trên thư mục Views/Shared/EditorTemplates bạn cần để tạo ra một khuôn mẫu để loại DateTime, vì vậy mỗi khi bạn sử dụng @Html.EditorFor màn hình MVC bất cứ điều gì bạn xác định trên mẫu của bạn

Answer 3

Bạn cũng có thể muốn ẩn thời gian từ hộp văn bản để bạn thấy "08/11/2007" trái ngược với "08/11/2007 00:00:00".

Để thực hiện việc này, hãy thêm "[DataType (DataType.Date)]" vào lớp tin tức của bạn như dưới đây;

public class News 
{ 
    public int ID { get; set; } 
    public string News_Entry { get; set; } 
    [DataType(DataType.Date)] 
    public DateTime News_Date { get; set; } 
} 

Answer 4

EditorĐể bỏ qua các thuộc tính bổ sung. Hoặc là sử dụng TextBoxFor hoặc viết EditorFor mẫu ...