DatePicker 在 Bootstrap ASP.NET MVC 5 中无法正确显示答案

【问题标题】：DatePicker not displaying properly in Bootstrap ASP.NET MVC 5DatePicker 在 Bootstrap ASP.NET MVC 5 中无法正确显示
【发布时间】：2023-03-30 12:58:02
【问题描述】：

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

<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 中的显示方式：

【问题讨论】：

您是否包含了相关的 .css 文件？
你能告诉我这个日期选择器必要的css吗

标签： c# jquery asp.net twitter-bootstrap datepicker

【解决方案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>

【讨论】：

谢谢，我试试这个
死链接。根本没有为这个问题增加价值。
怎么死的？它是 datepicker 的工作演示。因为问题出在 css 文件上。
链接现在可以工作，但您至少应该从页面添加一些上下文，因为它可能会永久关闭。加回 +1。

【解决方案2】：

在 App_Start/Bundle.config 中

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

【讨论】：