javascript - JQuery UI Datepicker css 看起来非常有问题

Question

我正在使用来自此处的 JQuery UI Datepicker:https://jqueryui.com/datepicker/ .这是我的实现的样子:

包括。在我的标题中:

<!-- JQuery -->
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Include Single Date Picker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>

HTML。我同时有两个日期选择器:

<!-- Include Single Date Picker -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<td><input th:field="*{dateFrom}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td>
 <td><input th:field="*{dateTo}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td>

Javascript。在我的页面底部:

<!-- Initialize Date Picker -->
<script type="text/javascript">
$( function() {
    $( ".datepicker" ).datepicker();
});
</script>

为什么我的日历看起来很乱？

Answer 1

看起来你的代码中某处的 td 上有 padding-right，尝试检查你的开发者工具并查看在哪里.ui-datepicker td {border: 0;填充:1px 被覆盖