如何获取 Html.Editorfor 的日期选择器

Posted 2023-05-07

【中文标题】如何获取 Html.Editorfor 的日期选择器

【英文标题】：How to get a datepicker for Html.Editorfor

【发布时间】：2012-05-02 07:54:48

【问题描述】：

在我的 MVC3 剃须刀页面上，我有一个日期字段

@html.EditorFor(model => model.Member.Dob)

下面是我试图为“出生日期”字段获取日期选择器的代码。

<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>

但是当我运行这个页面时，我得到了错误

Microsoft JScript runtime error: Object doesn't support property or method 'datepicker' 

请帮我找到一种将日期选择器添加到我的页面的方法

【参考方案1】：

您需要在 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>

如下使用：

@Html.EditorFor(model => model.Member.Dob)

【讨论】：

你能告诉我如何在我看来渲染 datetime.cshtml 非常感谢你

如果您使用@Html.IdForModel() 而不是@ViewData.ModelMetadata.PropertyName，它将适用于嵌套属性。见：***.com/questions/15654716/…

【参考方案2】：

这篇文章完美地涵盖了这一点： 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

【参考方案3】：

<div class="form-group">
                @Html.LabelFor(model => model.Birthdate, "Birthday", new  @class = "control-label col-md-2" )
                <div class="col-md-5">
                    @Html.Kendo().DatePickerFor(model => model.Birthdate)
                    @Html.ValidationMessageFor(model => model.Birthdate)
                </div>
            </div>