Question

根据我使用的主题 - 我的日期选择器不起作用，它会杀了我。

我之前已经做了很多次但是我得到了一个奇怪的反应：我可以在没有我的自定义引导主题的情况下让它工作但是有了它，它将无法工作。页面加载它应该看起来如何，但是datepicker不起作用，但如果我删除我的主题，它将会。

我说这很奇怪的原因是因为我在2天前在一个项目中使用了这个主题并且它工作得非常好但现在它不会在这个新项目中使用。

@model WADTrackerApplication.Models.Weight

@{
    ViewBag.Title = "Create";
}
<html>
<head>

</head>
<body>
    <div class="container">

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Weight</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model._Weight, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model._Weight, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model._Weight, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DateTime, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateTime, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateTime, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AdditonalComments, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AdditonalComments, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AdditonalComments, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
    </div>

    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/moment.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $('DateTime').datetimepicker({
                viewMode: 'years',
                format: 'DD/MM/YYYY'
            });
        });

    </script>
</body>

</html>




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

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

Answer 1

您的javascript代码有一个错误的选择器$('DateTime')将选择Datetime类型的所有元素，这些元素在您的标记中不存在。

将描述性类或ID添加到您想要充当日期选择器的输入中：

@Html.EditorFor(model => model.DateTime, new { htmlAttributes = new { @class = "form-control date-picker" } })

然后在js片段中使用该选择器：

$(function () {
  $('.date-picker').datetimepicker({
    viewMode: 'years',
    format: 'DD/MM/YYYY'
  });
});

无法使DatePicker工作

1 个答案: