将JQuery的datepicker与bootstrap一起使用 [英] Using JQuery's datepicker with bootstrap

问题描述

在我将bootstrap 4添加到我的jQuery项目之前，日期选择器如下所示:

Before I added bootstrap 4 to my jQuery project, the datepicker looked like this:

在添加引导程序4之后，日期选择器如下所示:

After I added bootstrap 4, then the datepicker looks like this:

我认为仅更改了格式/大小.如何停止覆盖格式并使其看起来像原始格式?

I assume that it is only the formatting/size that has been changed. How do I stop the formatting being over-ridden and to get it to look like the original?

我尝试了以下方法.

1. 使用jquery而不是$
调用日期选择器
2. 根据

1. Calling the datepicker using jquery instead of $
2. Calling $.fn.datepicker.noConflict(); (I do not seem to be able to apply noConflict to the datepicker functionality, only to jQuery as a whole) as per jQuery ui datepicker conflict with bootstrap datepicker

或者，我尝试修复引导程序，以使日历看起来更像样，并且箭头按钮不会跳动.

Alternatively, I tried to fix the bootstrap so that the calendar looked more decent and the arrow buttons didn't jump around.

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

1. Trying to use a bootstrap specific datepicker (although it is unclear to me which one works with Bootstrap 4 and whether I can add tooltip holidays to it using the beforeShowDay method, which is a prerequisite for my application)

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>

谢谢

推荐答案

此解决方法来自@Jimmy Stenke在

This workaround comes from @Jimmy Stenke's answer in 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" />

这篇关于将JQuery的datepicker与bootstrap一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！