jQuery UI日期选择器：标签下方对齐问题

Question

我正在尝试在标签（<span>）上使用jQuery日期选择器，而不是输入字段。以下是代码：

http://jsfiddle.net/r7D2x/

// javascript 
$('#placeholder').datepicker({
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: true,
    showOn: 'button',
    buttonText: 'set',
    dateFormat: 'd-M-y',
    onSelect: function(dateText, inst) {
        var date = $(this).datepicker('getDate');
        var epoch = date.valueOf() / 1000;
        $('#value').val(epoch);
        $('#label').text(dateText);
    }
});
(function() {
    var initial = 1297800000;
    var $label = $('#label');
    if (initial == '' || initial == '0') {
        $label.text('not set');
    } else {
        var date = new Date(initial * 1000);
        $label.text($.datepicker.formatDate('d-M-y', date));
    }

})();

<!-- html -->
<span id="label" /><:input_nulldate></span>
<input type="hidden" id="placeholder" />
<input type="hidden" id="value"  />

但是我无法让它在 <span> 下弹出。它总是在按钮上方弹出。我该如何使其对齐正确？

- mpen

Answer 1

您可以使用CSS将框移动到其他位置。例如：

.ui-datepicker { 
  margin-left: -80px;
  margin-top: 40px

}

您可以将其放在想要的位置。

- Daniel Ahrnsbrak

---

呵呵，那些数字完全正确。希望有一种定位选项可以将其锚定到另一个元素上...这有点取决于事物保持相同的大小。但没关系。 - mpen

另一个可能有效的选项是将日期选择器附加到 div 或 span，但不通过配置中的按钮显示它。文档中有这些静态日期选择器的示例。然后，您可以创建自己的按钮，调用日期选择器上的 show 和 hide。 - Daniel Ahrnsbrak