如何讓jQuery UI Datepicker顯示在輸入字段的左側？

Question

我正在使用的項目使用IE8，框架和絕對定位。其中一個框架太小，但由於項目要求，我無法改變尺寸。我已經包含了jQuery UI日期選擇器，但它直接出現在字段上（上面或下面沒有空間顯示）。

我想改爲將datepicker顯示在輸入的左側。有什麼辦法可以做到這一點？我已經在測試頁面中嘗試過這段代碼，但仍然無法從下面改變位置。

 $(".date").datepicker({ 
     changeYear: true, 
     dateFormat: 'mm/dd/yy', 
     constrainInput: true, 
     yearRange: 'c-125:c+125', 
     showAnim: "", 
     showOptions: { direction: "up" } 
     }); 

Answer 1

將日期時間選擇器包裝成帶有一些id的div/span/p。應用方向屬性在CSS的DIV >>

爲前：

HTML代碼：

<div id="dtPicker">Date: 
    <input type="text" id="datepicker"/> 
</div> 

CSS：

div#dtPicker { 
    direction: rtl; 
} 

JS：

$("#datepicker").datepicker({ 
    showOn: "button", 
    buttonImage: "../../icon.png", 
    buttonImageOnly: true 
}); 

該圖標應顯示在輸入欄的左側。 :)

或者在您的自定義CSS中，您可以覆蓋圖像的jQuery UI CSS。

.ui-datepicker-trigger { 
    float: left; 
} 

Answer 2

可以使用的日期選擇器類似isRTL屬性：

$('#datepicker').datepicker({ 
    isRTL: true, 
    ... 
}); 

的更多信息，可以發現@http://api.jqueryui.com/datepicker/#option-isRTL