2011-02-25 98 views
4

http://jsfiddle.net/r7D2x/jQuery UI的日期选择器:下面对准标签发出

我想一个标签(<span>),而不是输入字段上使用jQuery日期选择器。这里是代码:

// 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>下。它不断弹出按钮。我怎样才能让它正确对齐?

回答

3

您可以使用css移动框。例如:

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

} 

将得到它关于你想要的地方。

+0

heh。这些数字是轰动的。希望有一种定位选项可以将它固定在不同的元素上。这种情况可能与保持相同尺寸的东西有关。但是好的 – mpen 2011-02-26 05:40:15

+1

另一个可能的选择是将日期选择器附加到一个div或span,但不能通过配置中的按钮显示。该文档包含这些静态datepickera的示例。然后,您可以制作自己的按钮,调用该节目并隐藏在日期选择器上。 – 2011-02-26 14:24:13