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

Posted 2023-05-08

【中文标题】将 JQuery 的日期选择器与引导程序一起使用

【英文标题】：Using JQuery's datepicker with bootstrap

【发布时间】：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：谢谢！仍然希望有更简单的东西！

【参考方案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" />