jquery ui datepicker force non-inline (popup) mode on span or div

问题

I am attaching datepicker to a span but I want the popup style and functionality that you get from attaching to an input. I can change the css to position:absolute, but the datepicker does not close on escape, blur, select, etc. Do I have to manually handle the popup functionality (such as closing the datepicker) or is there a way to disable inline mode?

script

//Inline Editing: Dates
$('.date span').live('click', function () {
    var $date = $(this);
    $date.datepicker({
        onSelect: function (val, dp) {
            var $job = $date.closest('.job');
            var data = {
                entityTypeName: 'Sale',
                entityId: $job.attr('data-id'),
                propertyName: $date.attr('data-property-name'),
                propertyValue: val
            };
            $.post(urlSaveProperty, data, function (r) {
                if (r == 'ok') {
                    $date.effect('highlight');
                } else {
                    alert(r);
                    $date.val('error');
                }
            });
        }
    });
    $(this).datepicker('show');
});

cshtml

<td class="contract-date date">
    <span data-property-name="ContractDate" >
        @job.ContractDate.SimplifyThisYear()
    </span>
</td>

来源：https://stackoverflow.com/questions/17371859/jquery-ui-datepicker-force-non-inline-popup-mode-on-span-or-div