Calendar.css

.calendar {
    position: fixed;
    width: 210px;
    height: 200px;
    background: #DAD9DD;
    font-family: Helvetica;
    color: #3F4E5E;
    font-weight: bold;
    display: block;
}

.calendar .header {
    position: absolute;
    width: 100%;
    height: 38px;
    text-align: center;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#949494));
}

.header .month-year {
    position: relative;
    top: 4px;
}

a {
    text-decoration: none;
    color: #3F4E5E;
}

.header .left-arrow {
    top: 3px;
    left: 8px;
    position: absolute;
    text-align: left;
    font-size: 17px;
}

.header .right-arrow {
    top: 3px;
    right: 8px;
    position: absolute;
    text-align: right;
    font-size: 17px;
}

.header .week-days {
    position: absolute;
    font-size: 10px;
    bottom: -2px;
    text-align: left;
    width: 100%;
}

.week-days table {
    width: 100%;
    text-align: center;
}

.calendar .days-table-wrapper {
    position: absolute;
    top: 38px;
    width: 100%;
}

.days-table-wrapper table {
    width: 100%;
    height: 100%;
}

.days-table-wrapper table {
    text-align: center;
    border: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
}

.days-table-wrapper td {
    padding: 4px;
    text-align: center;
    border: 1px #F2F2F3 solid;
}

.calendar td {
    width: 30px;
}

Calendar.js

months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
daysInMonths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

Calendar = function(configuration) {
    this.relativeElement = $("#"+configuration.relativeElementId);
    this.date = new Date();
    this.setLayout();
    this.setEvents(this);
    this.updateDaysTable(this.date);   
}

Calendar.prototype.setLayout = function() {
    this.calendarDiv = $("<div>").addClass("calendar");
    $("body").append(this.calendarDiv);
    
    this.headerDiv = $("<div>").addClass("header");
    $(this.calendarDiv).append(this.headerDiv);
    $(this.calendarDiv).css( { "top": $(this.relativeElement).position().top + 22 + "px" } );
    
    this.monthYearSpan = $("<span>").addClass("month-year");
    $(this.headerDiv).append(this.monthYearSpan);
    
    this.leftArrow = $("<a>").addClass("left-arrow").html("&larr;").attr("href", "#");
    $(this.headerDiv).append(this.leftArrow);
    
    this.rightArrow = $("<a>").addClass("right-arrow").html("&rarr;").attr("href", "#");
    $(this.headerDiv).append(this.rightArrow);
    
    var weekDaysDiv = $("<div>").addClass("week-days");
    $(this.headerDiv).append(weekDaysDiv);
    
    var weekDaysTable = $("<table>").append("<tr>");
    var row = $("tr", weekDaysTable);
    for (var i = 0; i < 7; i++) {
        var cell = $(row).append("<td>").children().last().append(weekdays[i].substr(0, 3));
    }
    $(weekDaysDiv).append(weekDaysTable);
    
    this.daysTableWrapperDiv = $("<div>").addClass("days-table-wrapper");
    $(this.calendarDiv).append(this.daysTableWrapperDiv);
}

Calendar.prototype.updateMonthYear = function(month, year) {
    $(this.monthYearSpan).html(month + " " + year);
}

Calendar.prototype.updateDaysTable = function(date) {
    if (this.daysTable != null) {
        $(this.daysTable).remove();
    }
    var calendarObject = this;
    date.setDate(1);    
    var first = date.getDay();
    var monthNumber = date.getMonth();
    var year = date.getFullYear();
    var monthLength = year % 4 == 0 && year % 100 != 0 && monthNumber == 1 || year % 400 == 0 ? 29 : daysInMonths[monthNumber];
    var d = 1;

    this.daysTable = $("<table>");
    for (var i = 0; i < Math.ceil((first + monthLength) / 7); i++) {
        var row = $(this.daysTable).append("<tr>").children().last().children().last();
        for (var j = 0; j < 7; j++) {
            var cell = $(row).append("<td>").children().last().addClass("day").attr("value", d);
            if (i * 7 + j >= first && d <= monthLength) {
                $(cell).click(function() { 
                    date.setDate($(this).attr("value"));
                    $(calendarObject.relativeElement).attr("value", date.toDateString()); 
                    calendarObject.showOrHide();
                });
                $(cell).append(d++);
            }
        }
    }
    $(this.daysTableWrapperDiv).append(this.daysTable);
    $(this.calendarDiv).height($(this.headerDiv).height() + $(this.daysTable).height());
    this.updateMonthYear(months[monthNumber], year);
}

Calendar.prototype.setEvents = function(calendarObject) {

    var d = calendarObject.date;
    
    $(this.leftArrow).click(function() {
        d.setMonth(d.getMonth() - 1);
        calendarObject.updateDaysTable(d);
    });
    
    this.rightArrow.click(function() {
        d.setMonth(d.getMonth() + 1);
        calendarObject.updateDaysTable(d);
    });
    
}

Calendar.prototype.showOrHide = function() {
    $(this.calendarDiv).toggle();
}

index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    
    <title>Calendar Picker</title>
    
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="Calendar.js"></script>
    <link href="Calendar.css" rel="stylesheet" type="text/css">
    
    <script type="text/javascript">
        cal = null;
        
        function showCalendar(id) {
            if (cal != null) {
                cal.showOrHide();
                return;
            }
            cal = new Calendar({relativeElementId: id});
        }
        
    </script>
    
</head>

<body>
    <input id="calText" type="text" name="cal" onclick="showCalendar(this.id)"/>    
</body>

</html>