Question

我需要在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。

Answer 1

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

无法使用，因为“EditorFor”将不接受（传递给DOM）一个类。

所以，你需要使用“TextBoxFor”，它将接受一个类或更好，创建一个EditorTemplate 来处理任何一个DateTime字段并添加该类那里。 This link详细说明了如何制作模板。

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

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

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

Answer 2

编辑为我接受课程

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

Html标记

class="datepicker text-box single-line"

班级是有效的。

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

jQuery DatePicker MVC4 EditorFor

3 个答案: