jQuery DatePicker MVC4 EditorFor答案

【问题标题】：jQuery DatePicker MVC4 EditorForjQuery DatePicker MVC4 EditorFor
【发布时间】：2013-06-29 21:54:48
【问题描述】：

我需要在 EditorFor 字段上使用 datepicker。

我的视图代码是：

<div class="editor-label">
    @Html.Label("birthDate","birthDate")
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})
    @Html.ValidationMessageFor(model => model.birthDate)
</div>

脚本：

<script type="text/javascript">
$(document).ready(
    function () {
        $('.datepicker').datepicker({
            changeMonth: true,
            changeYear: true,
            minDate: "-99Y",
            dateFormat: "dd/mm/yyyy"
        });
    });

我无法让它工作。我有以下错误：Microsoft JScript 运行时错误：对象不支持此属性或方法 'datepicker'。

在尝试调用该函数之前，我已经加载了 jQuery。

【问题讨论】：

验证 jquery 的顺序，你能发布整个视图文件，包括脚本吗？
你能说说你是怎么解决的吗？
我检查了加载 jquery 的顺序。然后我将 EditorFor 更改为 TextBoxFor。

标签： asp.net-mvc-4 jquery-ui-datepicker editorfor

【解决方案1】：

@Html.EditorFor(model => model.birthDate, new { @class = "datepicker"})

不会起作用，因为 "EditorFor" 不会接受（传递给 DOM）类。

因此，您需要使用“TextBoxFor”，它会接受一个类，或者更好的是，创建一个 EditorTemplate 来处理任何属于 DateTime 的字段并添加类那里。 This link详细介绍了如何制作模板。

一旦你的类工作（可以在源代码中验证），其余的只是引用 jquery 代码。我用

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")

并使用您已有的脚本激活它。注意名称 '.datepicker' 与 Class 完全相同。

【讨论】：

【解决方案2】：

EditorFor 为我接受课程

@Html.EditorFor(model => model.Birthday, new { htmlAttributes = new { @class = "datepicker",@Name="birthday",@PlaceHolder = "mm/dd/yyyy" } })

HTML 标记

class="datepicker text-box single-line"

班级正在工作。

【讨论】：

很好的答案：D，它比选择的更好！

【解决方案3】：

我有一个类似的问题，通过使用支持日期时间的 HTML5 功能解决，在您的示例中，我建议尝试这样的事情：

<div class="editor-label">
    @Html.Label("birthDate","birthDate")
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.birthDate, new { @class = "datepicker", type="datetime-local"})
    @Html.ValidationMessageFor(model => model.birthDate)
</div>

我唯一添加的是 type ="datetime-local"

【讨论】：