JSCal

HTML

<link rel="stylesheet" href="http://luxcore.tmweb.ru/1/JSCal/css/jscal2.css">
<link rel="stylesheet" href="http://luxcore.tmweb.ru/1/JSCal/css/border-radius.css">
<link rel="stylesheet" href="http://luxcore.tmweb.ru/1/JSCal/css/steel/steel.css">
<script src="http://luxcore.tmweb.ru/1/JSCal/js/jscal2.js"></script>
<script src="http://luxcore.tmweb.ru/1/JSCal/js/unicode-letter.js"></script>
<script src="http://luxcore.tmweb.ru/1/JSCal/js/lang/ru.js"></script>
<script src="http://luxcore.tmweb.ru/1/js/css3pie/PIE.js"></script>
<input size="30" id="inputDateField" /><button id="btnDate">...</button><br />
<hr />

<script type="text/javascript">//<![CDATA[
    Calendar.setup({
        inputField : "inputDateField",
        trigger    : "btnDate",
        onSelect   : function() { this.hide() },
        titleFormat: "%B, %Y",
        weekNumbers: true,
        showTime   : false,
        dateFormat : "%d.%m.%Y"
    });
//]]></script>

CSS

#inputDateField, #btnDate {
    vertical-align: middle;
    font-family: Calibri;
    font-size: 16pt;
}

#inputDateField {
    background-color: #D9D9D9;
    border: 1px solid #646464;
    border-radius: 3px 0px 0px 3px;
    border-right: none;
    height: 30px;
    width: 110px;
    text-align: center;
    position: relative;
    behavior: url(PIE.js)
}

#btnDate {
    background-color: #1789D5;
    color: white;
    font-weight: bold;
    height: 34px;
    border-radius: 0px 3px 3px 0px;
    border: 1px solid #0F5987;
}

#btnDate:hover {
    background-color: #43A8EB
}