你如何使用jQuery UI的日期选择器与MVC的Html.TextBoxFor？ [英] How do you use the jQuery UI Datepicker with MVC's Html.TextBoxFor?

问题描述

我使用的模型实体框架结合，并具有Html.TextBoxFor（型号=> model.date）输入。我知道如何告诉jQuery的如何实现一个日期选择器，但不是在这种情况下。我需要什么在这里添加有一个日历弹出当用户进入这个领域？

I am using Model binding with the Entity Framework and have an Html.TextBoxFor(model =>model.date) input. I know how to tell jQuery how to implement a datepicker but not in this context. What would I need to add here to have a calendar popup when the user enters this field?

推荐答案

您将要使用的HtmlHelper重载允许您指定的HTML属性。然后用jQuery选择，他们的目标。

You'll want to use the HtmlHelper overload that allows you to specify Html attributes. Then target them with the jquery selector.

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

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

虽然我推荐使用 EditorFor 代替。

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

您可以创建一个EditorTemplate处理任何字段是的DateTime ，并让它输出正确的字段。

You can create an EditorTemplate to handle any field that is a DateTime and have it output the proper field.

创建 /Views/Shared/EditorTemplates/DateTime.ascx ，并把这个在它...

Create /Views/Shared/EditorTemplates/DateTime.ascx and put this in it...

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

或者，如果你需要允许日期时间与空值：

Or if you need to allow DateTime's with nulls:

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

然后你就可以随时使用EditorFor，并有一个中央ASCX编辑，如果你想修改日期时间在你的意见处理方式。

Then you can always use EditorFor and have a central ascx to edit if you ever want to modify the way date times are handled in your views.

这篇关于你如何使用jQuery UI的日期选择器与MVC的Html.TextBoxFor？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！