一个单独的 jQuery UI DatePicker 不工作

Question

我在一个视图上有三个文本输入。都有课程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; }

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

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

我完全被困住了。

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

单击某一天会产生错误“无法设置属性 'currentDay' of undefined”。

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

Answer 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()) })

Answer 2

我使用了每个脚本文件的确切版本（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")
}

Shared/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")

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

Answer 3

使用此链接了解更多信息：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/

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