datetime picker base (v4)

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css">
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<br/>
<div class="wrapper">
    Some content goes here<br />
    Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
  <input type="text" class="form-control" />	
    <span class="input-group-addon">
      <span class="glyphicon-calendar glyphicon"></span>
    </span>
</div>
</div>
</div>
</div>

CSS

.wrapper {
    height: 100px;
    overflow: auto;
}
body {
    position: relative;
}

JavaScript

$('#dtp').datetimepicker({
    format: 'MMM D, YYYY',
    widgetParent: 'body'
});

$('#dtp').on('dp.show', function() {
	      var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last');
	      if (datepicker.hasClass('bottom')) {
	        var top = $(this).offset().top + $(this).outerHeight();
	        var left = $(this).offset().left;
	        datepicker.css({
	          'top': top + 'px',
	          'bottom': 'auto',
	          'left': left + 'px'
	        });
	      }
	      else if (datepicker.hasClass('top')) {
	        var top = $(this).offset().top - datepicker.outerHeight();
	        var left = $(this).offset().left;
	        datepicker.css({
	          'top': top + 'px',
	          'bottom': 'auto',
	          'left': left + 'px'
	        });
	      }
	    });