引入Bootstrap 4后jQuery Datepicker样式被覆盖的恢复方法问询

嘿，我碰到过一模一样的问题！Bootstrap 4的全局样式（尤其是表单元素、通用按钮类）很容易和jQuery UI Datepicker的默认样式冲突，下面几个方法亲测有效，你可以挨个试试：

把jQuery UI的CSS文件放在Bootstrap CSS之后加载，利用CSS的“后加载样式覆盖前序同优先级样式”规则，让Datepicker的原生样式优先级更高：

<!-- 先加载Bootstrap样式 -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 再加载jQuery UI核心样式 + Datepicker专属样式 -->
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="jquery-ui.theme.min.css">

这个方法能解决绝大多数基础样式冲突，比如输入框尺寸、日历面板的边框/字体问题。

如果调整顺序后还是有局部样式异常，可以给Datepicker单独套一个隔离容器，强制重置Bootstrap的继承样式：

1. 初始化Datepicker时指定专属容器：

$("#your-datepicker-input").datepicker({
  appendTo: "#datepicker-isolated-container"
});

2. 在HTML中添加这个容器：

<div id="datepicker-isolated-container" class="ui-datepicker-safe"></div>

3. 编写针对性CSS重置Bootstrap的影响：

.ui-datepicker-safe .ui-datepicker {
  all: unset; /* 清除Bootstrap的所有继承样式 */
  /* 下面复制jQuery UI Datepicker的原生样式 */
  font-family: Arial, sans-serif;
  font-size: 1em;
  border: 1px solid #aaaaaa;
  background: #fefefe;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.ui-datepicker-safe .ui-datepicker-header {
  background: #f0f0f0;
  padding: .2em 0;
  border-bottom: 1px solid #ddd;
}
/* 按需补全日历面板内的按钮、日期单元格等样式 */

如果只有个别元素（比如输入框、切换按钮）被Bootstrap影响，可以单独给这些元素加类并重置：

/* 重置Datepicker输入框的Bootstrap样式 */
.datepicker-original-input {
  border-radius: 0 !important; /* 取消Bootstrap的圆角 */
  padding: .2em .4em !important; /* 恢复Datepicker默认内边距 */
  font-size: 1em !important;
}

初始化时给输入框绑定这个类：

$("#your-datepicker-input").datepicker().addClass('datepicker-original-input');

$.fn.datepicker.noConflict()是用来解决JS层面的命名冲突（比如其他插件也叫datepicker），但你的问题是CSS样式被覆盖，所以这个方法对当前问题没用，不用在这上面浪费精力啦。

内容的提问来源于stack exchange，提问作者gordon613