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

Demo

JQuery UI

您需要包含以下文件

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