jQuery 如何为 Html.Editorfor 获取日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10251153/
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 to get a datepicker for Html.Editorfor
提问by Lee
On my MVC3 razor page I have a date field
在我的 MVC3 razor 页面上，我有一个日期字段
@Html.EditorFor(model => model.Member.Dob)
Given below is the code I am trying to get a datepicker for the Date of Birth field.
下面给出的是我试图为出生日期字段获取日期选择器的代码。
<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>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#Member_Dob").datepicker();
});
</script>
But when I run this page I am getting error
但是当我运行这个页面时出现错误
Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'
Please help me find a way to add datepicker to my page
请帮我找到一种将日期选择器添加到我的页面的方法
回答by JP.
You'll need to create an EditorTemplate in your Views\Shared\EditorTemplate folder. Name it DateTime.cshtml. Should look something like the following:
您需要在 Views\Shared\EditorTemplate 文件夹中创建一个 EditorTemplate。将其命名为 DateTime.cshtml。应该如下所示：
@model System.DateTime?
<div class="editor-label">
@Html.Label("")
</div>
<div class="editor-field">
@Html.TextBox("", String.Format("{0:MM/dd/yyyy}",(Model == DateTime.MinValue)? null : Model), new { @class="text"})
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#@ViewData.ModelMetadata.PropertyName").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
gotoCurrent: true
});
});
</script>
Use it as follows:
使用方法如下：
@Html.EditorFor(model => model.Member.Dob)
回答by angularsen
This article covers this perfectly: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx
这篇文章完美地涵盖了这一点：http: //blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker- and-adding-a-jquery-validate-date-range-validator.aspx
