CSS Calendar w/ jQuery UI

Use it, abuse it, enjoy it! Created by @JohnieHjelm.

by Ayyappan Sakthivadivel

HTML

<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepicker-sv.js"></script>
<!-- Remove the code above for standard Regional Format -->

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<div id="datepicker"></div>

CSS

body{
 padding:50px;
 background:#f0f0f0;
 font-family:Helvetica;
 font-size:13px;   
}

#datepicker:before{
 position:absolute;
 top:-10px;
 left:50%;
 margin-left:-5px;
 display:block;
 content:"";
 width:0;
 height:0;
 border-bottom:5px solid #444751;
 border-top:5px solid transparent;
 border-left:5px solid transparent;
 border-right:5px solid transparent;
}

#datepicker{
 position:relative;
 background:#444751;
 display:inline-block;
 padding:5px;
 width:250px;
 -webkit-border-radius:4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow:0 1px 0 #FFF;
 -moz-box-shadow:0 1px 0 #FFF;
 box-shadow:0 1px 0 #FFF; 
}

.ui-datepicker-header{
 -webkit-border-radius:3px 3px 0 0;
 -moz-border-radius:3px 3px 0 0;
 border-radius:3px 3px 0 0;
 -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .3) inset;
 -moz-box-shadow:0 1px 0 rgba(255, 255, 255, .3) inset;
 box-shadow:0 1px 0 rgba(255, 255, 255, .3) inset;
 background: #D25068;
 background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F66C7B), to(#D25068));
 background-image: -moz-linear-gradient(top, #F66C7B, #D25068 100%);
 color:#FFF;
 height:32px;
 position:relative;
}

.ui-datepicker-header:after{
 background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAACCAYAAACKVvbTAAAAKUlEQVQIHWP8//8/Awh8/PgRwgDzIAQ/Pz8jiMUCExMQEDCBsWE0zAAA8dYKZBkmJoYAAAAASUVORK5CYII=') repeat-x;
 position:absolute;
 bottom:2px;
 left:0;
 display:block;
 width:99%;
 height:2px;
 content:""; 
}

.ui-datepicker-prev:hover{
 border-right:5px solid #000;   
}

.ui-datepicker-prev{
 cursor:pointer;
 float:left;
 display:block;
 border-bottom:5px solid transparent;
 border-top:5px solid transparent;
 border-left:5px solid transparent;
 border-right:5px solid #FFF;
 text-indent:-9999px;
 height:0;
 width:0;
 margin-top:10px;
 margin-left:5px; 
}

.ui-datepicker-next:hover{
 border-left:5px solid #000;   
}

.ui-datepicker-next{
 cursor:pointer;
 float:right;
 display:block;
 border-bottom:5px solid...

JavaScript

$(function() {
    $( "#datepicker" ).datepicker();
});