將標題移動到jQuery UI datepicker的底部

Question

就像標題所說，爲了美觀的目的，我想將標題（prev，next，current month）移到最下面。我是一個笨蛋，並且有一種方法可以將它設置在排列中，否則我必須用黑客絕對定位來做到這一點？

Answer 1

夫婦的方式做到這一點的頂部OP我的頭：

• 擴展的日期選擇器類，並添加自己的HTML

• 使用beforeShow選項來改變DOM。刪除標題並將其附加到選取器的底部。

好運

Answer 2

還有就是對於這個頁面的底部jQueryUI的日期選擇器的所有選項的列表：

http://jqueryui.com/demos/datepicker/

我找不到移動任何選項頭。我想你將不得不採取hacky代碼。

類似於下面的短代碼應該將datepicker標題移動到其父元素的末尾，所以它應該顯示在日曆下方。您應該在打開日期選擇器覆蓋圖時執行代碼：

jQuery('.ui-datepicker-header').each(function() { $(this).parent().append($(this)) }) 

Answer 3

沒有內置的方法來執行此操作。使用beforeShow選項不起作用，因爲它啓動時，datepicker的HTML尚未創建。日期選擇器小部件應該觸發一個create事件，但不會（它被記錄爲事件文檔的一個錯誤 - http://jqueryui.com/demos/datepicker/）。

就我個人而言，我認爲最簡潔的方式來處理這個問題是通過事件input[type=text]。不一定是理想的，但是這並不覺得太過於樸素而且工作。

$('input') 
    .datepicker() 
    .on('focus', function() { 
     $('.ui-datepicker-header').insertAfter('.ui-datepicker-calendar'); 
    }); 

活生生的例子 - http://jsfiddle.net/5gWrS/