jQuery DatePicker MVC4 EditorFor

Question

Tôi cần phải sử dụng datepicker trên một trường EditorFor.

Mã của tôi cho quan điểm là:

<div class="editor-label"> 
    @Html.Label("birthDate","birthDate") 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker"}) 
    @Html.ValidationMessageFor(model => model.birthDate) 
</div> 

Kịch bản:

<script type="text/javascript"> 
$(document).ready(
    function() { 
     $('.datepicker').datepicker({ 
      changeMonth: true, 
      changeYear: true, 
      minDate: "-99Y", 
      dateFormat: "dd/mm/yyyy" 
     }); 
    }); 

Tôi không thể làm cho nó làm việc. Tôi có lỗi sau: Lỗi thời gian chạy Microsoft JScript: Đối tượng không hỗ trợ thuộc tính này hoặc phương thức 'datepicker'.

Tôi đã tải jQuery trước khi tôi cố gắng gọi hàm.

Answer 1

@Html.EditorFor(model => model.birthDate, new { @class = "datepicker"}) 

Sẽ không làm việc, bởi vì "EditorFor" sẽ không chấp nhận (vượt qua cùng với DOM) Class.

Vì vậy, bạn nhu cầu sử dụng "TextBoxFor" mà sẽ chấp nhận một lớp hoặc tốt hơn, tạo ra một EditorTemplate để xử lý bất kỳ lĩnh vực đó là một DateTime và thêm các lớp đó. This link chi tiết cách tạo Mẫu.

Khi bạn có Lớp đang hoạt động (có thể được xác minh trong mã nguồn), phần còn lại chỉ tham chiếu mã jquery. Tôi sử dụng

@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/bundles/jqueryui") 

và kích hoạt nó bằng tập lệnh bạn đã có. Xem tên '.datepicker' chính xác giống với Class.

Answer 2

EditorFor chấp nhận một lớp học cho tôi

@Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "datepicker",@Name="birthday",@PlaceHolder = "mm/dd/yyyy" } }) 

Html đánh dấu

class="datepicker text-box single-line" 

The Class là công việc.

Answer 3

Tôi đã có một vấn đề simmilar, giải quyết bằng cách sử dụng chức năng HTML5, có hỗ trợ cho datetime, trong ví dụ của bạn tôi sẽ đề nghị cố gắng somthing như thế này:

<div class="editor-label"> 
    @Html.Label("birthDate","birthDate") 
</div> 
<div class="editor-field"> 
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker", type="datetime-local"}) 
    @Html.ValidationMessageFor(model => model.birthDate) 
</div> 

điều duy nhất mà tôi addes là một loại = "datetime-local"