2011-02-25 101 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