BS DatePicker

by Giri Jeedigunta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<div class="dt-cont">
  <input type="text" class="datepicker">
  <div id="custom-pos"></div>
</div>

CSS

#custom-pos {
  position: absolute;
  top: 33px;
  right: -300px;
  margin: 0;
  padding: 0;
  width: 250px;
  height: 250px;
}

.dt-cont {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
}

JavaScript

$('.datepicker').datepicker({
  container: '#custom-pos'
});