bootstrap datetimepicker styles not applied correctly

Profile picture for Osuwariboy
Osuwariboy

I'm having a bit of trouble making this bootstrap datetimepicker work:

http://eonasdan.github.io/bootstrap-datetimepicker/

I made a very basic page, here's the code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>Test page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css">

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/moment-with-locales.min.js"></script>
<script src="js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
	$('#datetimepicker1').datetimepicker();
});
</script>
</head>

<body>
<div class='col-sm-2'>
	<div class='input-group' id='datetimepicker1'>
		<input type='text' class="form-control" />
		<span class="input-group-addon">
			<span class="glyphicon glyphicon-calendar"></span>
		</span>
	</div>
</div>

</body>
</html>

Now, it's not like the plugin doesn't work, it's more like some styles are not applied correctly. Here's a picture to better illustrate what I mean. On the left is what I have and on the right is what I actually want:

datepicker comparison

As you can see, everything's aligned left instead of centered and things are narrower. Also, there's no hover effect when I run my mouse over the calendar and the current day is not outlined properly. Can anyone tell me what I'm doing wrong?

From your screenshot, it looks like you're not pulling in the bootstrap-datetimepicker.css library. Take a look at your console and make sure you don't have any errors and the library exists in the folder it's looking for and has all the appropriate contents.

It won't look awful without the extra css because bootstrap is doing most of the heavy lifting and plugins are usually just taking advantage of Bootstrap's classes and adding a couple of their own to box it all up.

demo

With Library - Working

<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$(function() {
  $('#datetimepicker1').datetimepicker();
});
<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
  <div class='input-group' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<!-- end snippet -->

Without Library - Broken

<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$(function() {
  $('#datetimepicker1').datetimepicker();
});
<!-- language: lang-html --> 
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='col-xs-4'>
  <div class='input-group' id='datetimepicker1'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<!-- end snippet -->

P.S. - It's hard to debug since we have no way of knowing what the files look like in your local /js/ folder. In the future, I would suggest using CDN's for online samples so it's easier to share what you're looking at with others. You can grab distributable static files with cdnjs here: