jQueryUI 1.8.21

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.21/jquery-ui.js"></script>
<button type="button" class="btn" id="date_button">Select Date...</button>

<input type="hidden" name="date" id="date_field" />
<!-- Fixing odd bug with hidden element and datepicker -->
<span></span>

JavaScript

$(function() {
    var $button = $("#date_button"),
        left = $button.offset().left,
        top = $button.offset().top + $button.height();
    
    $('#date_field').datepicker({
        onSelect: function(dateText) {
            $('#date_field').val(dateText);
            $button.text(dateText);
        },
        beforeShow: function (event, ui) {
            setTimeout(function () {
            ui.dpDiv.css({ left: left, top: top });      
            }, 5);                
        }
    });

    $button.on("click", function() {
        $("#date_field").datepicker("show");
    });
});