[英]How to make eonasdan datetimepicker css work properly?
I'm implementing eonasdan's datetimepicker in my project. 我正在我的项目中实现eonasdan的datetimepicker。 I'm having a problem making the CSS work as intended.
我在使CSS正常工作时遇到问题。
I downloaded the datepicker JS and CSS from https://github.com/Eonasdan/bootstrap-datetimepicker and named them bootstrap-datepicker.js and bootstrap-datepicker.css respectively. 我从https://github.com/Eonasdan/bootstrap-datetimepicker下载了datepicker 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">
The JavaScript function: JavaScript函数:
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
In HTML file: 在HTML文件中:
<td>Incident Date & 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>
I have already followed the steps from the github page but I could not get the desired appeareance of the datepicker but instead it appears like this . 我已经按照github页面上的步骤进行操作,但是我无法获得所需的datepicker外观,但是它看起来像这样 。 Any help is appreciated.
任何帮助表示赞赏。
Make sure you have any CSS table/tr/td
was set 确保您已设置任何CSS
table/tr/td
Please Change table in your work is 请在您的工作表中更改
<table> this is your work </table>
...
<style>
table,tr,td{
border: 1px solid black;
}
</style>
To... 至...
<div class="data"><table> this is your work </table></div>
...
<style>
div.data table,tr,td{
border: 1px solid black;
}
</style>
that because Bootstrap 3 Datepicker created table
element for datepicker Like this 因为Bootstrap 3 Datepicker为datepicker创建了
table
元素,像这样
Then you set CSS without parent defined that mean it use all table/tr/td
tag in that page 然后,在未设置父项的情况下设置CSS,这意味着它将使用该页面中的所有
table/tr/td
标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.