DatePicker 在 Bootstrap ASP.NET MVC 5 中没有正确显示

Question

我的表单中有一个日期选择器，但它没有在任何浏览器中正确显示

<div class="col-md-10">
    @Html.TextBoxFor(model => model.DateJoined, new { @class = "datepicker" })
    @Html.ValidationMessageFor(model => model.DateJoined)
</div>

我添加了 jquery UI 并添加了这样的 Javascript：

<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
    $(function () { // will trigger when the document is ready
        $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

这就是它在 UI 中的显示方式：

Answer 1

演示

jQuery 用户界面

您需要包含以下文件

//css file jQuery UI
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

//jQuery file js reference.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

//jQuery UI js reference.
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Answer 2

在 App_Start/Bundle.config

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.min.css",
                      "~/Content/site.css",
                      "~/Content/jquery-ui.css"));