asp.net-mvc 您如何将 jQuery UI Datepicker 与 MVC 的 Html.TextBoxFor 一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2924610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you use the jQuery UI Datepicker with MVC's Html.TextBoxFor?
提问by Matt
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?
我在实体框架中使用模型绑定，并有一个 Html.TextBoxFor(model =>model.date) 输入。我知道如何告诉 jQuery 如何实现日期选择器，但不是在这种情况下。当用户输入此字段时，我需要在此处添加什么才能弹出日历？
回答by Jab
You'll want to use the HtmlHelper overload that allows you to specify Html attributes. Then target them with the jquery selector.
您将需要使用 HtmlHelper 重载，它允许您指定 Html 属性。然后使用 jquery 选择器定位它们。
// in view
<%= Html.TextBoxFor(x => x.Date, new { @class="datepicker" })%>
// in js
$(document).ready({
$('.datepicker').datepicker();
});
Though I recommend using EditorForinstead.
虽然我建议EditorFor改用。
<%= Html.EditorFor(x => x.Date)%>
You can create an EditorTemplate to handle any field that is a DateTimeand have it output the proper field.
您可以创建一个 EditorTemplate 来处理任何 a 字段DateTime并让它输出正确的字段。
Create /Views/Shared/EditorTemplates/DateTime.ascxand put this in it...
创建/Views/Shared/EditorTemplates/DateTime.ascx并将其放入其中...
<%@ 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:
或者，如果您需要允许 DateTime 为空值：
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%= Html.TextBox("", (Model.HasValue? Model.Value.ToShortDateString():""), new { @class="datepicker"} )%>
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.
然后，如果您想修改视图中处理日期时间的方式，则可以始终使用 EditorFor 并使用中央 ascx 进行编辑。
回答by Kevin LaBranche
From the looks of your code sample (TextBoxFor) you are using MVC2....
从您的代码示例 (TextBoxFor) 的外观来看，您使用的是 MVC2 ....
Here's an example using MVC 2that creates a template that will call the jQery date picker whenever you use a date & a second more in depth example.
这是一个使用 MVC 2的示例，该示例创建了一个模板，每当您使用日期和第二个更深入的示例时，该模板将调用 jQery 日期选择器。
回答by Marc Tidd
Create an EditorTemplate for the DateTime type and then use EditorFor instead of TextBoxFor. The edit template should be a user control called DateTime.ascx with code something like:
为 DateTime 类型创建一个 EditorTemplate，然后使用 EditorFor 而不是 TextBoxFor。编辑模板应该是一个名为 DateTime.ascx 的用户控件，其代码类似于：
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime>" %>
<%: Html.TextBox("", String.Format("{0:MM-dd-yyyy}", Model))%>
<script type="text/javascript">
$(document).ready(function () {
$("#<%: ViewData.ModelMetadata.PropertyName %>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm-dd-yy',
showButtonPanel: true,
gotoCurrent: true
});
});
</script>
Check out Scott Hanselman's talk on MVC 2 on channel 9. http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/
看一下Scott Hanselman的在MVC 2通话信道9 http://channel9.msdn.com/posts/matthijs/ASPNET-MVC-2-Basics-Introduction-by-Scott-Hanselman/
回答by jim tollan
I'd go with an approach similar to Marc's. Here's my own version of it:
我会采用类似于 Marc 的方法。这是我自己的版本：
" %><%string name = ViewData.TemplateInfo.HtmlFieldPrefix;%>
<%string id = name.Replace(".", "_");%>
<div class="editor-label">
<%= Html.LabelFor(model => model) %>
</div>
<div class="editor-field">
<%= Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd-MM-yyyy") : string.Empty), new { @class = "date" }) %>
<%= Html.ValidationMessageFor(model => model)%>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=id%>").datepicker({
showOn: 'both',
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '<%=Url.Content("~/Content/images/calendar.gif") %>'
});
});
</script>
create your EditorTemplates folder under the shared folder and name it DateTime.ascx.
在共享文件夹下创建您的 EditorTemplates 文件夹并将其命名为 DateTime.ascx。
