Bootstrap datepicker CSS blue style - by Andrew Pougher

Bootstrap datepicker CSS blue style - by Andrew Pougher

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://raw.github.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js"></script>
<div class="inline-inputs">
    <label></label>
    <input type="text" class="input-mini dates" id="from" placeholder="Check in"
    autocomplete="off"> <i class="icon icon-arrow-right"></i>

    <input type="text" class="input-mini dates"
    id="to" placeholder="Check out" autocomplete="off">
    <button class="btn btn-success btn-small" id="filterfindbtn">Find</button>
</div>

CSS

/* ------
   bootstrap DatePicker 
   					-----*/
     .datepicker {
     top: 0;
     left: 0;
     width: 216px;
     height: auto;
     font: 9pt 'Gotham', Arial, Helvetica, Sans-Serif;
     -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
 /* day title */
 .dow {
  border-bottom: 1px solid #bbb;
 }
 /* bootstrap ddm */
.dropdown-menu {
     border-radius:0px;
     padding:0
 }
 .datepicker:before {
     content:'';
     display: inline-block;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     border-bottom: 7px solid #ccc;
     border-bottom-color: rgba(0, 0, 0, 0.2);
     position: absolute;
     top: -7px;
     left: 6px;
 }
 .datepicker:after {
     content:'';
     display: inline-block;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid #ffffff;
     position: absolute;
     top: -6px;
     left: 7px;
 }
 .datepicker > div {
     display: none;
 }
 .datepicker table {
     width: 100%;
     margin: 0;
 }
 
 .datepicker tbody td:last-child {
	border-right: 0px;
}
 .datepicker tbody tr {
	border-bottom: 1px solid #bbb;
}
 .datepicker tbody tr:last-child {
	border-bottom: 0px;
}


  /* main DP nums*/
 .datepicker td{
  	border-right: 1px solid #bbb;
  	 border-bottom: 1px solid #bbb;
     text-align: center; 
     	color: #666666;
     	font-weight: bold;
	text-shadow: 1px 1px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=1);	
	width: 30px;
	height: 20px;
 	background: #ededed;
	background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
	background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background:...

JavaScript

$(function () {


     var nowdTemp = new Date();
     var now = new Date(nowdTemp.getFullYear(), nowdTemp.getMonth(), nowdTemp.getDate(), 0, 0, 0, 0);

     var checkin = $('#from').datepicker({
         format: 'mm/dd/yyyy',
         onRender: function (date) {
             return date.valueOf() < now.valueOf() ? 'disabled' : '';
         }
     }).on('changeDate', function (ev) {
         if (ev.date.valueOf() > checkout.date.valueOf()) {
             var newDate = new Date(ev.date)
             newDate.setDate(newDate.getDate() + 1);
             checkout.setValue(newDate);
         }
         checkin.hide();
         $('#to')[0].focus();
     }).data('datepicker');
     var checkout = $('#to').datepicker({
         format: 'mm/dd/yyyy',
         onRender: function (date) {
             return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
         }
     }).on('changeDate', function (ev) {
         checkout.hide();
     }).data('datepicker');


     $('#to').focus()
 });