1

我在一个视图上有三个文本输入。都有课datepicker。

@Html.TextBox("Dummy", DateTime.Now, new { @class = "datepicker" })
@Html.EditorFor(model => model.StartDate)
@Html.EditorFor(model => model.EndDate)

下面的两个被我的DateTime编辑器模板覆盖：

@model DateTime?
@{
    string editText = Model.HasValue ? Model.Value.ToShortDateString() : "";
}
@Html.TextBox("", editText, new { @class = "datepicker" })

_Layout这些是在以下代码中为我的模板中的日期选择器设置的：

$(function () {
    $(".datepicker").datepicker({
        dateFormat: "yy/mm/dd"
    });
});

现在，仅 的日期选择器弹出窗口StartDate完全没有响应。它甚至不会改变月份，更不用说选择日期了。所有三个输入都是相同的。StartDate和都是EndDate不可为空的DateTime字段，声明为：

    [Display(Name = "Start Date")]
    public DateTime StartDate { get; set; }

    [Display(Name = "End Date")]
    public DateTime EndDate { get; set; }

我正在使用 jQuery 1.10.2 和 jQuery UI 1.10.3，它们都是通过 NuGet 安装的。我必须包含以下脚本才能使 DatePickers 工作：

<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>

我完全受阻。

修正： Javascript 控制台中显示错误：

单击某一天会产生错误“无法设置未定义的属性‘currentDay’”。

单击上个月或下个月的图标会产生“无法读取未定义的属性'设置'”

4

3 回答 3

1

我使用了每个脚本文件的确切版本（jQuery、jQuery UI、jQuery migrate）并使用了你的代码，没有发现错误。它工作正常，没有任何问题。

模态：

 public class Test
    {
        [Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }

        [Display(Name = "End Date")]
        public DateTime EndDate { get; set; }
    }

编辑视图：

@model MvcApplication2.Models.Test

@{
    ViewBag.Title = "Test";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Test</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Test</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.StartDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.StartDate)
            @Html.ValidationMessageFor(model => model.StartDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EndDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EndDate)
            @Html.ValidationMessageFor(model => model.EndDate)
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

共享/EditorTemplates/DateTime.Cshtml

@model DateTime?
@{
    string editText = Model.HasValue ? Model.Value.ToShortDateString() : "";
}
@Html.TextBox("", editText, new { @class = "datepicker" })

<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker({
            dateFormat: "yy/mm/dd"
        });
    });
</script>

下面是 CSS 和 JS 文件的顺序。

 @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/jquery-ui.css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Scripts/jquery-migrate-1.1.1.js") 
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")

似乎是其他原因导致了问题，而不是任何脚本文件或其他任何东西。您可能想在新项目中尝试我的代码。

于 2013-10-03T14:42:13.487 回答
1

我猜你没有文本框的唯一ID？日期选择器需要唯一的 ID。要么在javascript中添加它

$(function () {
    $(".datepicker:not(.hasdatepicker)").uniqueId().datepicker({
        dateFormat: "yy/mm/dd"
    });
});

或将其添加到剃须刀中

@Html.TextBox("", editText, new { @class = "datepicker", id = string.Format("datepicker-{0:N}", Guid.NewGuid()) })
于 2013-10-03T03:16:08.627 回答
0

使用此链接了解更多信息：http: //jqueryui.com/datepicker/

并尝试将 mm 更改为 MM

$(function () {
    $(".datepicker").datepicker({
        dateFormat: "yy/MM/dd"
    });
});

第二个答案：

尝试使用此日期/时间选择器： http ://tarruda.github.io/bootstrap-datetimepicker/ 或 http://www.eyecon.ro/bootstrap-datepicker/

我同时使用了它们，并为我工作。希望这会有所帮助。

于 2013-09-26T13:57:34.103 回答