javascript - 如何使 eonasdan datetimepicker css 正常工作？

Question

我正在我的元素中实现 eonasdan 的 datetimepicker。我在使 CSS 按预期工作时遇到问题。

我从 https://github.com/Eonasdan/bootstrap-datetimepicker 下载了日期选择器 JS 和 CSS并分别命名为 bootstrap-datepicker.js 和 bootstrap-datepicker.css。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" media="all" href="css/formmail.css">

JavaScript 函数:

<script>
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
</script>

在 HTML 文件中:

<td>Incident Date &amp; Time</td>
<td colspan="2">
    <div class='input-group date' id='datetimepicker1'>
         <input type='text' class="form-control" name="datetime" size="90">
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
         </span>
    </div>

我已经按照 github 页面上的步骤进行操作，但我无法获得 desired appeareance的日期选择器，而是显示 like this .感谢您的帮助。

Answer 1

确保您设置了任何 CSS table/tr/td

请在您的工作中更改表

<table> this is your work </table> 
...
<style>
table,tr,td{
  border: 1px solid black;
}
</style>

为了...

<div class="data"><table> this is your work </table></div>
...
<style>
div.data table,tr,td{
  border: 1px solid black;
}
</style>

那是因为Bootstrap 3 Datepicker为日期选择器创建了 table 元素，就像这样

然后你设置 CSS 没有父级定义，这意味着它使用该页面中的所有 table/tr/td 标签