[英]How to make eonasdan datetimepicker css work properly?
我正在我的項目中實現eonasdan的datetimepicker。 我在使CSS正常工作時遇到問題。
我從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">
JavaScript函數:
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
在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>
我已經按照github頁面上的步驟進行操作,但是我無法獲得所需的datepicker外觀,但是它看起來像這樣 。 任何幫助表示贊賞。
確保您已設置任何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為datepicker創建了table
元素,像這樣
然后,在未設置父項的情況下設置CSS,這意味着它將使用該頁面中的所有table/tr/td
標簽
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.