将 JQuery 的日期选择器与引导程序一起使用答案

【问题标题】：Using JQuery's datepicker with bootstrap将 JQuery 的日期选择器与引导程序一起使用
【发布时间】：2018-10-13 16:08:11
【问题描述】：

在我将 bootstrap 4 添加到我的 jQuery 项目之前，日期选择器看起来像这样：

添加 bootstrap 4 后，日期选择器如下所示：

我假设只是格式/大小已更改。如何阻止格式被覆盖并使其看起来像原始格式？

我已经尝试了以下方法。

使用jquery 而不是$ 调用日期选择器
按照jQuery ui datepicker conflict with bootstrap datepicker 调用$.fn.datepicker.noConflict();（我似乎无法将noConflict 应用于日期选择器功能，只能应用于整个jQuery）

或者，我尝试修复引导程序，使日历看起来更体面，并且箭头按钮不会跳来跳去。

尝试使用特定于引导程序的日期选择器（尽管我不清楚哪个适用于引导程序 4，以及是否可以使用 beforeShowDay 方法向其添加工具提示假期，这是我的应用程序的先决条件）

HTML代码是这样的：

<TD class="labelH5">Open Date:</TD>
<TD>
    <div class="row">
      <div class="col-md-8">
        <INPUT TYPE="text" class="form-control" id="datepicker1">
      </div>
    </div>
</TD>

谢谢

【问题讨论】：

看来您的问题的唯一解决方案是您使用不同的 css 类为 datepicker 编写自定义模板，并将它们定义在单独的 css 文件中，并从 bootstrap v3 css 复制 css 代码。
bootstrap 4 是否将 css 应用于 jQuery UI 添加的类？
@T J. 也许吧。（我将 HTML 添加到我的问题中）
@user1735921：谢谢！仍然希望有更简单的东西！

标签： jquery twitter-bootstrap datepicker bootstrap-4

【解决方案1】：

此解决方法来自@Jimmy Stenke 在How to resize the jQuery DatePicker control 中的回答

我加了

<style>
 div.ui-datepicker {
    font-size: 12px;
}
</style>

之后

<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />

我还删除了对

的引用

<link rel="stylesheet" href="css/sunny/jquery.ui.theme.css" type="text/css" media="all" />

【讨论】：