你如何在MVC的Html.TextBoxFor中使用jQuery UI Datepicker？

Question

我正在使用与实体框架的模型绑定并具有Html.TextBoxFor(model => model.date)输入.我知道如何告诉jQuery如何实现datepicker但不在此上下文中.当用户进入此字段时,我需要在此处添加一个日历弹出窗口？

Answer 1

您将需要使用允许您指定Html属性的HtmlHelper重载.然后使用jquery选择器定位它们.

// in view
<%= Html.TextBoxFor(x => x.Date, new { @class="datepicker" })%>

// in js
$(document).ready({
         $('.datepicker').datepicker();
    });

虽然我建议EditorFor改用.

<%= Html.EditorFor(x => x.Date)%>

您可以创建一个EditorTemplate来处理任何字段,DateTime并输出正确的字段.

创建/Views/Shared/EditorTemplates/DateTime.ascx并将其放入其中......

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>    
<%= Html.TextBox("", Model.ToShortDateString(), new { @class="datepicker" } )%>

或者,如果您需要允许DateTime使用null:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>    
<%= Html.TextBox("", (Model.HasValue? Model.Value.ToShortDateString():""), new { @class="datepicker"} )%>

然后,如果您想要修改视图中处理日期时间的方式,您可以随时使用EditorFor并编辑中央ascx.