简体   繁体   中英

How to make eonasdan datetimepicker css work properly?

I'm implementing eonasdan's datetimepicker in my project. I'm having a problem making the CSS work as intended.

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.

<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:

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

In HTML file:

<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>

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 . Any help is appreciated.

Make sure you have any CSS table/tr/td was set

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 在此处输入图片说明

Then you set CSS without parent defined that mean it use all table/tr/td tag in that page

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM